使用ajax实现无刷新改变页面内容

如何使用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>

页面上添加隐藏域传值

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请求成功后回调函数。