首頁 > web前端 > js教程 > 主體

探討jQuery的ajax使用場景(c#)_jquery

WBOY
發布: 2016-05-16 17:10:50
原創
1118 人瀏覽過

一:jQuery.ajax語法基礎

jQuery.ajax([options])

概述:透過 HTTP 請求載入遠端資料。

jQuery 底層 AJAX 實作。簡單易用的高層實作請見 $.get, $.post 等。 $.ajax() 傳回其建立的 XMLHttpRequest 物件。使用這個方法可以獲得更多的靈活性。

資料型別
$.ajax()函數依賴伺服器提供的資訊來處理傳回的資料。透過dataType選項還可以指定其他不同資料處理方式。其中,text和xml類型傳回的資料不會經過處理。如果指定為html類型,任何內嵌的JavaScript都會在HTML作為一個字串傳回之前執行。如果指定為json類型,則會把獲取到的資料當作一個JavaScript物件來解析,並且把建構好的物件當作結果傳回。傳送資料到伺服器,預設情況下,Ajax請求使用GET方法。如果要使用POST方法,可以設定type參數值。這個選項也會影響data選項中的內容如何傳送到伺服器。

使用場景一:
描述:儲存資料到伺服器,成功時顯示資訊。 jQuery 程式碼:
$.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Bouncston",
   data: "name=John&location=Bounction",
: f  succ (msg){
     alert( "Data Saved: " msg );
   }

});


使用場景二:

描述:裝入一個 HTML 網頁最新版本。 jQuery 程式碼:
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
   $("#  $("# append(html);
  }

});


load(url, [data], [callback])
概述:載入遠端 HTML 檔案程式碼並插入至 DOM 中。

預設使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式。


使用場景一:

描述:載入 feeds.html 檔案內容。 jQuery 程式碼:

$("#feeds").load("feeds.html");

jQuery.get(url, [data], [callback], [type])和jQuery.post(url, [data], [callback], [type])


概述:透過遠端 HTTP GET或POST  請求載入資訊。
這是一個簡單的 GET或POST 請求功能以取代複雜 $.ajax 。請求成功時可呼叫回調函數。如果需要在出錯時執行函數,請使用 $.ajax。
描述:顯示 test.aspx 傳回值(HTML 或 XML,取決於傳回值),新增一組請求參數。 jQuery 程式碼:
$.get("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " data) ;
});
$.post("test.aspx", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded : " data);

});

上面是基本的語法,我們只是先做一個了解,要是你已經熟悉,那麼我們將開始一步一步對上面的方法和使用場景進行具體討論。

二:jQuery.ajax伴隨ASP.NET的實戰練習


先建立Default.aspx頁面,作為請求啟動頁面,並會獲得回傳值。頁面的程式碼Default.aspx是:

程式碼如下:







    <br><br>

    
    ajax:

    
    resulthtml:

    
    load:
    
  "get">get:
    
    post:

    


    body>


    Default.aspx.cs裡面有沒寫任何程式碼,預設即可。
    請求的接受者這裡面有三種角色:response.aspx頁、test.htm靜態頁和TextJson.txt。

    response.aspx頁面:主要是在伺服器端取得客戶端提交的數據,並傳回資料給客戶端。
    test.htm靜態頁面:主要是給客戶端局部裝入一個HTML網頁最新版本。
    TextJson.txt:是作為資料儲存在檔案中,讓客戶端來非同步存取的。

    response.aspx頁碼,response.aspx是:

    沒有任何html程式碼,因為主要是在伺服器端取得客戶端提交的數據,並傳回資料給客戶端,不需要顯示html內容,所以可以不含html標記。
    response.aspx.cs頁碼:

    複製程式碼 程式碼如下:


    程式碼如下:


    System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;using System.Web.UI;

    using System.Web.UI.WebControls;
    using System.Runtime.Serialization.Json;
    using System.Runtime.Serialization;

    namespace JqueryAjax2
    {
        public partial class response : System.Web.UI.Page
        {
          {
                string str = Request["key1"];
                Response.Write("success" str);
           取得客戶端提交的數據,並傳回資料給客戶端的方式。


    test.htm靜態頁面的程式碼是:


    複製程式碼 程式碼如下:
    程式碼如下:






       


    test .html

    當靜態頁面被要求後,會作為html的格式傳回客戶端,使用$("#resulthtml"). append(html);這樣的方法來顯示test.htm靜態頁面的內容。

    TextJson.txt裡面保存著一段文本,是json格式的:

    {   "key1": "劉明豐",   "key2": "林望",   "key3": "陳文傑",   "key4": "耿殿佳" }

    在被存取後傳回的是json格式的數據,在客戶端取得json後會自動轉換成物件。 好了,jQuery的非同步使用場景基本上滿足我們的需求,自己試試看。
    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板