$.ajax()在数据交互中的应用（ajax在jQuery的运用学习第十天）

        使用$.ajax()方法发送请求

        （1）功能描述

         创建一个用于登录的HTML页login.html，在页面中设置用于输入“用户名”和“密码”的文本框及“登录”和“取消”按钮，该页面不做任何数据处理。

         另外，创建一个服务器端页面login.aspx，用于处理静态页发送来的登录请求；同时创建一个HTML页6-9.html。在6-9.html中，先使用$.ajax()方法请求调用login.html页面，然后通过页面中“登录”按钮的单击事件，将获取的用户名称和密码发送到服务器，服务器响应请求，向客户端发送处理后的数据，客户端根据回调的数据显示不同的页面效果。

        （2）实现代码

           <script  type="text/javascript"  src="Jscript/jquery-1.8.2.min.js"></script>

           <script  type="text/javascript">

                    $(function(){

                            $.ajax({        //请求登录

                                    url:"login.html",        //登录静态页

                                    dataType:"html",

                                    success:  function(HTML)  {        //返回页面内容

                                            //将页面内容置入表单

                                            $("#frmUserLogin").html(HTML);

                                            //“登录”按钮单击事件

                                            $("#btnLogin").click(function()  {

                                                    //获取用户名称

                                                    var  strTxtName  =  encodeURI($("#txtName").val());

                                                    //获取输入密码

                                                    var  strTxtPass  =  encodeURI($("#txtPass").val());

                                                    //开始发送数据

                                                    $.ajax({    //请求登录处理页

                                                             url:"login.aspx",    //登录处理

                                                             dataType:"html",

                                                             //传送请求数据

                                                            data: {

                                                                   txtName: strTxtName ,

                                                                   txtPass: strTxtPass

                                                            } ,

                                                            //登录成功后返回的数据

                                                            success: function (strValue)  {

                                                                    //根据返回值进行状态显示

                                                                    if  (strValue == "True")  {

                                                                            $(".clsShow")

                                                                            .html("操作提示，登录成功！")；

                                                                    }

                                                                    else  {

                                                                            $("#divError")

                                                                            .show().html("用户名或密码错误！");

                                                                    }

                                                            }

                                                    })

                                            })

                                    }

                            })

                    })

          </script> 

    

          <form  id="frmUserLogin"></form>

另外，再新建一个HTML页面Login.html，该文件的代码内容如下所示：

          <div  class="divFrame">

                    <div  class="divTitle">

                            <span>用户登录</span>

                    </div>

                    <div  class="divContent">

                                <div  class="clsShow">

                                        <div  id="divError"  class="clsError"></div>

                                        <div>名称：<input  id="txtName"  type="text"  class="txt"></div>

                                        <div>密码：<input  id="txtPass"  type="password"  class="txt"></div>

                                        <div>

                                                   <input  id="btnLogin"  type="button"  value="登录"  class="btn"  />&nbsp;&nbsp

                                                   <input  id="btnReset"  type="reset"  value="取消"  class="btn"  />

                                        </div>

                                </div>

                    </div>

          </div>

新建一个服务器端文件Login.aspx，该文件代码内容如下：

           <%@  Page  Language="C#"  ContentType="text/html"  ReponseEncoding="gb2312"  %>

           <%

                    string  strName  =  System.Web.HttpUtility.UrlDecode(Request["txtName"]);  //解码姓名字符

                    string  strPass  =  System.Web.HttpUtility.UrlDecode(Request["txtPass"]);  //解码密码字符

                    bool  blnLogin  =  false;

                    if  (strName  ==  "admin"  &&  strPass  ==  "123456") {

                            blnLogin  =  true;

                    }

                    Response.Write(blnLogin);

            %>

代码分析：

            由于$.ajax()方法是jQuery中最底层的方法，因此，凡使用全局变量函数$.getScript()，$.get()，$post()，$.getJSON()调用的示例，都可以使用$.ajax()方法进行代替，限于篇幅，读者可以自行测试。