Jquery重新學習之九[Ajax運用總結C]

前兩篇文章主要介紹Jquery如何利用Ajax進行操作數據,主要介紹調用的方法;其中Jquery.ajax()是Jquery中最底層的方法;Jquery還定義的一個方法跟幾個事件為Jquery.ajax ()進行簡化跟擴展;

 

1:其中全局方法jQuery.ajaxSetup([options])則是為瞭在使用$.ajax(),有時一個頁面需要調用多個$.ajax()方法,如果每個方法都設置其中的請求細節,將是一件十分麻煩的事 。可以一次設置,全局有效,這樣大大簡化瞭$.ajax()方法中細節的編寫;

 

實例代碼(隻需要設置一個$.ajaxSetup(),其它幾個地方調用就不用再編寫相同的代碼):

 

復制代碼

<head>

    <title>$.ajaxSetup()方法全局設置Ajax</title>

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

    </script>

    <script type="text/javascript">

        $(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) {

                $("#pTip").empty(); //先清空標記中的內容

                var strHTML = ""; //初始化保存內容變量

                $(d).find("User").each(function() { //遍歷獲取的數據

                    var $strUser = $(this);

                    strHTML += n + ":" + $strUser.find(v).text() + "<hr>";

                })

                $("#pTip").html(strHTML); //顯示處理後的數據

            }

        })

    </script>

</head>

<body>

    <p class="pFrame">

         <p class="pTitle">

              <span><input id="Button1" type="button" value="姓名" class="btn" /></span>

              <span><input id="Button2" type="button" value="性別" class="btn" /></span>

              <span><input id="Button3" type="button" value="郵箱" class="btn" /></span>

         </p>

         <p class="pContent">

              <p id="pTip" class="clsShow"></p>

         </p>

    </p>

</body>

</html>

復制代碼

 

 

2:在Jquery中,除瞭全局性的函數外,還有6個全局性的Ajax事件,由於在使用$.ajax()方法時,其中的選項參數global的值默認情況下為true,這也意味著所有在執行的Ajax的數據請求,都綁定瞭全局事件;也就是說6個全局性的開關是global屬性決定;

 

 

 

2.1 ajaxStart(callback)和ajaxStop(callback)這兩個使用的頻率非常高,前者是當請求開始執行時觸發,往往用於編寫一些準備性的工作,後者是當請求結束時觸發;

 

實例代碼:

 

復制代碼

<head>

    <title>Ajax中的全局事件</title>

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

    </script>

    <script type="text/javascript">

        $(function() {

 

            //元素綁定全局ajaxStart事件

            $("#pMsg").ajaxStart(function() {

                $(this).show(); //顯示元素

            })

 

            //元素綁定全局ajaxStop事件

            $("#pMsg").ajaxStop(function() {

                $(this).html("已成功獲取數據。").hide();

            })

 

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

                $.ajax({ //帶參數請求服務器

                    type: "GET",

                    url: "GetData.aspx",

                    //獲取加碼後的數據並作為參數傳給服務器

                    data: { txtData: encodeURI($("#txtData").val()) },

                    dataType: "html",

                    success: function(data) { //顯示解碼後的返回數據

                        $("#pTip").html(decodeURI(data));

                    }

                })

            })

        })

         </script>

</head>

<body>

    <p class="pFrame">

         <p class="pTitle">

              <span>數據:<input id="txtData" type="text" class="txt" /></span>

              <span><input id="Button1" type="button" value="發送" class="btn" /></span>

         </p>

         <p class="pContent">

              <p id="pMsg" class="clsTip">正在發送數據請求…</p>

              <p id="pTip" class="clsShow"></p>

         </p>

    </p>

</body>

</html>

 

 

其中GetData.aspx代碼:

 

    string strName = Request["txtData"]; //返回傳回的參數

    Response.Write(strName); //返回傳回的參數

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *