jQuery.ajax的簡單應用執行個體 附執行個體下載

來源:互聯網
上載者:User

  先來看看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的開發,實現頁面無重新整理從伺服器擷取資料。

     下載這個執行個體。

 

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.