快捷導(dǎo)航

JQuery以JSON方式提交數(shù)據(jù)到服務(wù)端示例代碼

更新時(shí)間：2014年05月05日 15:38:04 作者：

這篇文章主要介紹了JQuery如何以JSON方式提交數(shù)據(jù)到服務(wù)端,需要的朋友可以參考下

JQuery將Ajax數(shù)據(jù)請(qǐng)求進(jìn)行了封裝，從而使得該操作實(shí)現(xiàn)起來(lái)容易許多。以往我們要寫(xiě)很多的代碼來(lái)實(shí)現(xiàn)該功能，現(xiàn)在只需要調(diào)用$.ajax()方法，并指明請(qǐng)求的方式、地址、數(shù)據(jù)類(lèi)型，以及回調(diào)方法等。下面的代碼演示了如何將客戶(hù)端表單數(shù)據(jù)封裝成JSON格式，然后通過(guò)JQuery的Ajax請(qǐng)求將數(shù)據(jù)發(fā)送到服務(wù)端，并最終將數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中。服務(wù)端定義為一個(gè).ashx文件，事實(shí)上你可以將服務(wù)端定義為任何能接收并處理客戶(hù)端數(shù)據(jù)的類(lèi)型，如Web Service，ASP.NET Page，Handler等。

首先，在客戶(hù)端，通過(guò)JavaScript腳本將頁(yè)面表單數(shù)據(jù)封裝成JSON格式。GetJsonData()函數(shù)完成了這一功能。然后我們通過(guò)$.ajax()方法將數(shù)據(jù)發(fā)送到服務(wù)端的RequestData.ashx。其中用到了JSON.stringify()方法，它可以將客戶(hù)端發(fā)送的數(shù)據(jù)轉(zhuǎn)換成JSON對(duì)象，詳細(xì)的內(nèi)容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

復(fù)制代碼代碼如下:

 
$("#btnSend").click(function() { 
$("#request-process-patent").html("正在提交數(shù)據(jù)，請(qǐng)勿關(guān)閉當(dāng)前窗口..."); 
$.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("請(qǐng)求已提交！我們會(huì)盡快與您取得聯(lián)系"); 
} 
}, 
error: function (message) { 
$("#request-process-patent").html("提交數(shù)據(jù)失敗！"); 
} 
}); 
}); 

function GetJsonData() { 
var json = { 
"classid": 2, 
"name": $("#tb_name").val(), 
"zlclass": "測(cè)試類(lèi)型1,測(cè)試類(lèi)型2,測(cè)試類(lèi)型3", 
"pname": $("#tb_contact_people").val(), 
"tel": $("#tb_contact_phone").val() 
}; 
return json; 
} 

再來(lái)看看服務(wù)端的代碼，RequestData.ashx.

復(fù)制代碼代碼如下:

 
[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; 
} 
} 
} 

定義一個(gè)帶有Serializable特征屬性的類(lèi)RequestDataJSON用來(lái)將客戶(hù)端數(shù)據(jù)進(jìn)行反序列化，從而獲取到數(shù)據(jù)并存入數(shù)據(jù)庫(kù)。上述代碼中使用了EntityFramework，從而使得數(shù)據(jù)庫(kù)的交互代碼變得很簡(jiǎn)潔。返回結(jié)果有兩種，對(duì)應(yīng)ajax中的回調(diào)函數(shù)success()和error()。在success()回調(diào)函數(shù)中，如果返回結(jié)果的值大于0，則表示通過(guò)EntityFramework添加到數(shù)據(jù)庫(kù)中的記錄數(shù)；在error()回調(diào)函數(shù)中，返回結(jié)果則顯示了失敗的具體信息。

RequestData類(lèi)繼承了IHttpHandler接口，表明它是以同步的方式處理客戶(hù)端請(qǐng)求。當(dāng)然，你也可以將其改為繼承IHttpAsyncHandler接口來(lái)處理異步請(qǐng)求，代碼接口大同小異。

您可能感興趣的文章: