JQuery將Ajax資料請求進行了封裝，從而使得該操作實現起來容易許多。以往我們要寫很多的程式碼來實現該功能，現在只需要呼叫$.ajax()方法，並指明請求的方式、位址、資料類型，以及回呼方法等。下面的程式碼示範如何將客戶端表單資料封裝成JSON格式，然後透過JQuery的Ajax請求將資料傳送到服務端，並最終將資料儲存到資料庫中。服務端定義為一個.ashx文件，事實上你可以將服務端定義為任何能接收並處理客戶端資料的類型，如Web Service，ASP.NET Page，Handler等。
首先，在客戶端，透過JavaScript腳本將頁面表單資料封裝成JSON格式。 GetJsonData()函數完成了這項功能。然後我們透過$.ajax()方法將資料傳送到服務端的RequestData.ashx。其中用到了JSON.stringify()方法，它可以將客戶端發送的資料轉換成JSON對象，詳細的內容可以看這裡https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /Global_Objects/JSON/stringify
程式碼如下:
$ ).click(function() {
$("#request-process-patent").html("正在提交數據，請勿關閉當前視窗...");
$.ajax({
type: "POST",
url: "RequestData.ashx",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(GetJsonData()),
dataType: "json",
success: function (message) {
if (message > 0) {
alert("請求已提交！我們會盡快與您聯繫");
}
},
error: function (message) {
$("#request-process-patent").html("提交資料失敗！");
}
}
});
});
function GetJsonData() {
var json = {
"classid": 2,
"name": $("#tb_name") .val(),
"zlclass": "測試類型1,測試類型2,測試類型3",
"pname": $("#tb_contact_people").val(),
"tel ": $("#tb_contact_phone").val()
};
return json;
再來看看服務端的程式碼，RequestData.ashx.
再來看看服務端的程式碼，RequestData.ashx。 >
複製程式碼
程式碼如下:
[Serializable]
public class RequestJSON 🎜>public int classid { get; set; }
public string name { get; set; }
public string zlclass { get; set; }
public string pname { get; set; }
}
public string tel { get; set; }
}
///
/// Summary description for RequestData
///
public class RequestData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int num = 0;
context.Response.ContentType = "appli/json"; context.Request;
var sr = new StreamReader(data.InputStream);
var sr = new StreamReader(data.InputStream);
var stream = sr.ReadToEnd();
var javaScriptSerializer = new JavaScript JavaScriptizer();
varerialedData = javaScriptSerializer. (stream);
tb_query obj = new tb_query();
obj.classid = PostedData.classid;
obj.name = PostedData.name;
obj.lclass = PostedData.name;
obj.lclass = PostedData.zlclass;
obj.pname = PostedData.pname;
obj.tel = PostedData.tel;
obj.ip = context.Request.UserHostAddress.ToString();
obj.posttime = DateTime.Now.ToString();
try
{
using (var ctx = new dbEntities())
{
ctx.tb_query.AddObject(obj);
num = ctx.SaveChanges();
}
}
catch (Exception msg)
{
context.Response.Write(msg.Message);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write(num);
}
public bool IsReusable
{ get >{ return false; } } } 定義一個帶有Serializable特徵屬性的類別RequestDataJSON用來反顯示客戶端資料，從而取得到數據並存入資料庫。上述程式碼中使用了EntityFramework，使得資料庫的互動程式碼變得很簡潔。傳回結果有兩種，對應ajax中的回呼函數success()和error()。在success()回呼函數中，如果傳回結果的值大於0，則表示透過EntityFramework加入資料庫中的記錄數；在error()回呼函數中，傳回結果則顯示了失敗的具體資訊。 RequestData類別繼承了IHttpHandler接口，表明它是以同步的方式處理客戶端請求。當然，你也可以將其改為繼承IHttpAsyncHandler介面來處理非同步請求，程式碼介面大同小異。
