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
. 代碼如下:
$("#btnSend").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.
. 代碼如下:
[Serializable]
public class RequestDataJSON
{
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>
/// Summary description for RequestData
/// </summary>
public class RequestData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
int num = 0;
context.Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream);
var stream = sr.ReadToEnd();
var javaScriptSerializer = new JavaScriptSerializer();
var PostedData = javaScriptSerializer.Deserialize<RequestDataJSON>(stream);
tb_query obj = new tb_query();
obj.classid = PostedData.classid;
obj.name = PostedData.name;
obj.zlclass = 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接口來處理異步請求，代碼接口大同小異。