JQuery学习笔记 [Ajax] (62)

1). $.get发送请求

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.get("UserInfo.aspx",
                { name: encodeURI($("#txtName").val()) },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })

UserInfo.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
    string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
    if (strName == "陶国荣")
    {
        strHTML += "姓名：陶国荣<br>";
        strHTML += "性别：男<br>";
        strHTML += "邮箱：tao_guo_rong@163.com<hr>";
    }
    else if (strName == "李建洲")
    {
        strHTML += "姓名：李建洲<br>";
        strHTML += "性别：女<br>";
        strHTML += "邮箱：xiaoli@163.com<hr>";
    }
    strHTML += "</div>";
    Response.Write(strHTML);
%>

2). $.post发送请求

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.post("User_Info.aspx",
                { name: encodeURI($("#txtName").val()),
                   sex: encodeURI($("#selSex").val())
                },
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })

User_Info.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解码姓名字符
    string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解码性别字符
    string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
    if (strName == "陶国荣" && strSex=="男")
    {
        strHTML += "姓名：陶国荣<br>";
        strHTML += "性别：男<br>";
        strHTML += "邮箱：tao_guo_rong@163.com<hr>";
    }
    else if (strName == "李建洲" && strSex == "女")
    {
        strHTML += "姓名：李建洲<br>";
        strHTML += "性别：女<br>";
        strHTML += "邮箱：xiaoli@163.com<hr>";
    }
    strHTML += "</div>";
    Response.Write(strHTML);
%>

3). serialize()序列化表单

$(function() {
            $("#Button1").click(function() { //按钮单击事件
                //打开文件，并通过回调函数返回服务器响应后的数据
                $.post("User-Info.aspx",
                $("#frmUserInfo").serialize(), //序列化表单数据
                function(data) {
                    $("#divTip")
                    .empty() //先清空标记中的内容
                    .html(data); //显示服务器返回的数据
                })
            })
        })

User-Info.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解码姓名字符
    string strSex = System.Web.HttpUtility.UrlDecode(Request["selSex"]); //解码性别字符
    string strEmail = Request["chkEmail"]; //是否显示邮件字符
    string strHTML = "<div class='clsShow'>"; //初始化保存内容变量
    if (strName == "陶国荣" && strSex=="男")
    {
        strHTML += "姓名：陶国荣<br>";
        strHTML += "性别：男<br>";
        if (strEmail=="1")
        {
            strHTML += "邮箱：tao_guo_rong@163.com";
        }
        strHTML += "<hr>";
    }
    else if (strName == "李建洲" && strSex == "女")
    {
        strHTML += "姓名：李建洲<br>";
        strHTML += "性别：女<br>";
        if (strEmail == "1")
        {
            strHTML += "邮箱：xiaoli@163.com<hr>";
        }
        strHTML += "<hr>";
    }
    strHTML += "</div>";
    Response.Write(strHTML);
%>

4). $.ajax()方法发送请求

$(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("用户名或密码错误！");
                                }
                            }
                        })
                    })
                }
            })
        })

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" ResponseEncoding="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);
%>

5). $.ajaxSetup()方法全局设置Ajax

$(function() {
            $.ajaxSetup({ //设置全局性的Ajax选项
                type: "GET",
                url: "UserInfo.xml",
                dataType: "xml"
            })
            $("#Button1").click(function() { //"姓名”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "姓名", "name"); //显示"姓名"部分
                    }
                })
            })
            $("#Button2").click(function() { //"性别”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "性别", "sex"); //显示"性别"部分
                    }
                })
            })

            $("#Button3").click(function() { //"邮箱”按钮的单击事件
                $.ajax({
                    success: function(data) { //传回请求响应的数据
                        ShowData(data, "邮箱", "email"); //显示"邮箱"部分
                    }
                })
            })
            /*
            *根据名称与值，获取请求响应数据中的某部分
            *@Param d为请求响应后的数据
            *@Param n为数据中文说明字符
            *@Param d为数据在响应数据中的元素名称
            */
            function ShowData(d, n, v) {
                $("#divTip").empty(); //先清空标记中的内容
                var strHTML = ""; //初始化保存内容变量
                $(d).find("User").each(function() { //遍历获取的数据
                    var $strUser = $(this);
                    strHTML += n + "：" + $strUser.find(v).text() + "<hr>";
                })
                $("#divTip").html(strHTML); //显示处理后的数据
            }
        })

UserInfo.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Info>
  <User id="1">
    <name>陶国荣</name>
    <sex>男</sex>
    <email>tao_guo_rong@163.com</email>
  </User>

  <User id="2">
    <name>李建洲</name>
    <sex>女</sex>
    <email>xiaoli@163.com</email>
  </User>
</Info>

6). Ajax中的全局事件

$(function() {
            //元素绑定全局ajaxStart事件
            $("#divMsg").ajaxStart(function() {
                $(this).show(); //显示元素
            })
            //元素绑定全局ajaxStop事件
            $("#divMsg").ajaxStop(function() {
                $(this).html("已成功获取数据。").hide();
            })
            //按钮的单击事件
            $("#Button1").click(function() {
                $.ajax({ //带参数请求服务器
                    type: "GET",
                    url: "GetData.aspx",
                    //获取加码后的数据并作为参数传给服务器
                    data: { txtData: encodeURI($("#txtData").val()) },
                    dataType: "html",
                    success: function(data) { //显示解码后的返回数据
                        $("#divTip").html(decodeURI(data));
                    }
                })
            })
        })

GetData.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%
    string strName = Request["txtData"]; //返回传回的参数
    Response.Write(strName); //返回传回的参数
%>