jQuery.ajax的簡單應用實例

時間 2019-12-01

標籤 jquery.ajax jquery ajax 簡單應用實例欄目 JQuery 简体版

原文原文鏈接

先來看看jQuery.ajax(options)的簡單介紹：ajax

　　　　經過 HTTP 請求加載遠程數據。數組

　　　　jQuery 底層 AJAX 實現。簡單易用的高層實現見 $.get, $.post 等。瀏覽器

　　　　$.ajax() 返回其建立的 XMLHttpRequest 對象。大多數狀況下你無需直接操做該對象，但特殊狀況下可用於手動終止請求。服務器

　　　　$.ajax() 只有一個參數：參數 key/value 對象，包含各配置及回調函數信息。函數

　　返回值：post

　　　　XMLHttpRequest測試

　　參數：url

　　　　options (可選) : AJAX 請求設置。全部選項都是可選的。spa

　　選項（只對此實例用到的選項進行解釋）：code

　　　　type (String) : (默認: "GET") 請求方式 ("POST" 或 "GET")，默認爲 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也能夠使用，但僅部分瀏覽器支持。

　　　　url (String) : (默認: 當前頁地址) 發送請求的地址。

　　　　data (Object,String) : 發送到服務器的數據。將自動轉換爲請求字符串格式。GET 請求中將附加在 URL 後。查看 processData 選項說明以禁止此自動轉換。

　　　　　　　　　　　　　　　必須爲 Key/Value格式。若是爲數組，jQuery 將自動爲不一樣值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換爲 '&foo=bar1&foo=bar2'。

　　　　beforeSend (Function) : 發送請求前可修改 XMLHttpRequest 對象的函數，如添加自定義 HTTP 頭。XMLHttpRequest 對象是惟一的參數。 Ajax 事件.

　　　　success (Function) : 請求成功後回調函數。參數：服務器返回數據，數據格式。 Ajax 事件。

　　實例：

　　　　用$.ajax()提交兩個數值並返回這兩個數值的和。

　　　　本實例使用jQuery 1.4.2類庫。

　　　　先看HTML文件的部分代碼：

<body>
    <form id="form1" runat="server">
    <div style="font-size:12px; padding-left:15px; padding-top:15px;">
       <input type="button" id="btn_ok" value="測試" onclick="FunAjax()" />
       &nbsp;&nbsp;
       <span id="span_content">顯示結果</span>
    </div>
    </form>
</body>

當點擊"測試"按鈕時觸發FunAjax函數，下面來看這個函數代碼：

function FunAjax()
{
    $.ajax({
        type: "POST",
        url: "jQueryAjaxTest.ashx",  
        data: "begin=1&end=9",
        beforeSend: function(){
            $("#span_content").text("數據處理中...");
        },
        success: function(msg){
            $("#span_content").text("兩個數的和爲： " + msg);
        }
    });  
}

FunAjax函數利用$.ajax()調用了jQueryAjaxTest.ashx文件，並經過data選項向jQueryAjaxTest.ashx文件傳遞了兩個數值，即begin=1&end=9，jQueryAjaxTest.ashx文件將返回這兩個數值相加的結果，jQueryAjaxTest.ashx文件部分代碼：

 //返回類型
        context.Response.ContentType = "text/plain";

        int iBegin = 0;
        int iEnd = 0;
        //接收參數
        int.TryParse(context.Request["begin"].ToString(), out iBegin);
        int.TryParse(context.Request["end"].ToString(), out iEnd);

        Thread.Sleep(1000);   //爲了能體現加載過程，在此我將程序延遲了一秒鐘
        
        //計算並返回結果
        context.Response.Write((iBegin+iEnd).ToString());