如何使用ajax實現無刷新改變頁面內容(也就是ajax異步請求刷新頁面)，下面通過一個小demo說明一下，前端頁面代碼如下所示
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg.aspx.cs" Inherits="p_tg" %>
2
3 <!DOCTYPE html>
4
5 <html>
6 <head>
7
8 <meta charset="UTF-8">
9
10 <script src="/js/jquery-1.7.2.min.js"></script>
11
12 </head>
13 <body>
14 <form runat="server"><!-- onsubmit="return JoinAjax()"-->
15 <asp:Literal runat="server" ID="lt_zhekou" Visible="false"></asp:Literal>
16
17 <!--蒙層-->
18
19 <div runat="server" class="mc_01" id="divOne_1" style="display:none;"><!--蒙層1-->
20 <div class="mc_a"><img src="images/mc_01.png"></div>
21 <div class="c_but_02"><a href="#" onclick="return click_a('divOne_1')">關閉</a></div>
22 <div class="c_bot02"><img src="images/mc_02.png"></div>
23 </div>
24 <div runat="server" class="mc_01" id="div1" style="display:none;"><!--蒙層2-->
25 <div class="mc_a"><img src="images/mc_03.png"></div>
26 <div class="c_but_02"><a href="#" onclick="return click_a('div1')">關閉</a></div>
27 <div class="c_bot02"><img src="images/mc_02.png"></div>
28 </div>
29 <!--主頁-->
30
31
32 </form>
33
34 </body>
35 </html>
說明：這個頁面需要實現的功能是，后台通過sql查詢數據庫，根據返回結果，前端用ajax訪問后台方法返回值，彈出蒙層1,或者蒙層2。(如果不用ajax方式，改變頁面內容時是有刷新的)
1 <script type="text/javascript">
2
3 $(function () {
4 $("#btnJoin").click(function () { 5 var bbid = $("#bbid").val(); 6 var ppid = $("#ppid").val(); 7 var openid = $("#openid").val(); 8 9 var nick = $("#nick").val(); 10 var sex = $("#sex").val(); 11 var pic = $("#pic").val(); //有數據的 12 13 $.ajax({ 14 type: "get", 15 url: "p_tg_ajax.aspx", 16 data: { "bbid": bbid, "ppid": ppid, "openid": openid, "nick": nick, "sex": sex, "pic": pic }, 17 success: function (res) { 18 //alert(res); 19 if (res == 0) {//根據后台的返回結果動態切換顯示內容 20 21 $("#div1").css("display", "none"); 22 $("#divOne_1").css("display", "block"); //蒙層1 23 } 24 else if (res == 1) { 25 $("#div1").css("display", "block"); //蒙層2 26 $("#divOne_1").css("display", "none"); 27 28 } else { 29 alert(res); 30 } 31 }, 32 error: function (xhr) { 33 alert("異常"); 34 } 35 }) 36 }) 37 }); 38 39 </script>
頁面上添加隱藏域傳值
<input type="hidden" id="openid" value="<%=openid %>" />
<input type="hidden" id="bbid" value="<%=bbid %>" />
<input type="hidden" id="ppid" value="<%=ppid %>" />
<input type="hidden" id="nick" value="<%=nick %>" />
<input type="hidden" id="sex" value="<%=sex %>" />
<input type="hidden" id="pic" value="<%=pic %>" />
p_tg_ajax.aspx的頁面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="p_tg_ajax.aspx.cs" Inherits="p_tg_ajax" %>
p_tg_ajax.aspx的.cs文件
public partial class p_tg_ajax : System.Web.UI.Page { public string bbid; public string openid; public string ppid; public string code; public string nick; public string sex; public string pic; public string accessToken; public string url; public string data; WebClient client = new WebClient(); JavaScriptSerializer serializer = new JavaScriptSerializer(); protected void Page_Load(object sender, EventArgs e) { bbid = Request.QueryString["bbid"];//接收參數 ppid = Request.QueryString["ppid"];// code = Request.QueryString["code"]; openid = Request.QueryString["openid"]; nick = Request.QueryString["nick"]; sex = Request.QueryString["sex"]; pic = Request.QueryString["pic"]; string appid = "aaaaaaaaaaa"; string secret = "123456468"; string sql = "select * from bbppcc where bbid=" + bbid + " and ccid=(select id from cc where openid='" + openid + "') and ppid=" + ppid + ""; bool bl = SqlHelper.ExecNonQuery(sql.ToString(), null); if (bl == true) { Response.Write(1); } else { SqlParameter[] p = new SqlParameter[] { new SqlParameter("@bbid",bbid), new SqlParameter("@ppid",ppid), new SqlParameter("@openid",openid), new SqlParameter("@pic",pic), new SqlParameter("@nick",nick), new SqlParameter("@sex",sex) }; DataTable dt = SqlHelper.ExecuteTable("cc_add", true, p); if (dt.Rows.Count > 0) { sql = "select * from bbppcc where bbid=" + bbid + " and ccid=(select id from cc where openid='" + openid + "') and ppid=" + ppid + ""; bl = SqlHelper.ExecNonQuery(sql.ToString(), null); if (bl == true) { Response.Write(0); } else { Response.Write(2); } } else { Response.Write("失敗!"); } } } }
ajax方法的屬性說明
type是提交方式,有兩種post和get,我用的是get傳值,這種方式傳值bbid = Request.QueryString["bbid"];后台使用QueryString取值,注意用post傳值QueryString是取不到值的!!!
url是String類型的參數，（默認為當前頁地址）發送請求的地址。
date是Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。對象必須為key/value格式，例如{"a": 111, "b":222, "c": 333}轉換為&a=111&b=222。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
success請求成功后回調函數。