如何使用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 %>" />
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请求成功后回调函数。