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ā)送的JSON數(shù)據(jù)對(duì)象進(jìn)行序列化操作，詳細(xì)的內(nèi)容可以看這里https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
$("#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.
[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)求，代碼接口大同小異。
聯(lián)系客服
