jQuery.ajax的簡單應用實例


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

    通過 HTTP 請求加載遠程數據。

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

    $.ajax() 返回其創建的 XMLHttpRequest 對象。大多數情況下你無需直接操作該對象,但特殊情況下可用於手動終止請求。

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

 

  返回值:

    XMLHttpRequest

 

  參數:

    options (可選) : AJAX 請求設置。所有選項都是可選的。

 

  選項(只對此實例用到的選項進行解釋):

    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());

這個實例只是$.ajax()的一個很簡單的應用,但很大程度上簡化了AJAX的開發,實現頁面無刷新從服務器獲取數據。

     下載這個實例:

       鏈接: http://pan.baidu.com/s/1o6xc6vS 密碼: eczj


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM