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)系客服