【轉】JQuery以JSON方式提交數據到服務端

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)
{

 

context.Response.ContentType = "application/json";
var data = context.Request;
var sr = new StreamReader(data.InputStream);
var stream = sr.ReadToEnd();
var javaScriptSerializer = new JavaScriptSerializer();
//將提交的數據封裝到實體對象StudentEntity裏
var PostedData = javaScriptSerializer.Deserialize<StudentEntity>(stream);

int sid= PostedData.sid;
string name = PostedData.sname;

context.Response.ContentType = "text/plain";

 

}

public bool IsReusable { get { return false; } }}