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

一：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是：

複製程式碼

程式碼如下:

   

    

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的非同步使用場景基本上滿足我們的需求，自己試試看。