JQuery以JSON情势提交数据到服务端示例代码_jquery_脚本之家

JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多。以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式、地址、数据类型,以及回调方法等。下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中。服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web
Service,ASP.NET Page,Handler等。
首先,在客户端,通过JavaScript脚本将页面表单数据封装成JSON格式。GetJsonData()函数完成了这一功能。然后我们通过$.ajax()方法将数据发送到服务端的RequestData.ashx。其中用到了JSON.stringify()方法,它可以将客户端发送的数据转换成JSON对象,详细的内容可以看这里
复制代码 代码如下: $.click {
$(“#request-process-patent”).html; $.ajax({ type: “POST”, url:
“RequestData.ashx”, contentType: “application/json; charset=utf-8”,
data: JSON.stringify, dataType: “json”, success: function { if { alert;
} }, error: function { $(“#request-process-patent”).html; function
GetJsonData() { var json = { “classid”: 2, “name”: $, “zlclass”:
“测试类型1,测试类型2,测试类型3”, “pname”: $.val(), “tel”: $.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
description for RequestData /// public class RequestData : IHttpHandler
{ public void ProcessRequest { int num = 0; context.Response.ContentType
= “application/json”; var data = context.Request; var sr = new
StreamReader; var stream = sr.ReadToEnd(); var javaScriptSerializer =
new JavaScriptSerializer(); var PostedData =
javaScriptSerializer.Deserialize; 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; num = ctx.SaveChanges(); } } catch
{ context.Response.Write; } context.Response.ContentType = “text/plain”;
context.Response.Write; } public bool IsReusable { get { return false; }
} }
定义一个带有Serializable特征属性的类RequestDataJSON用来将客户端数据进行反序列化,从而获取到数据并存入数据库。上述代码中使用了EntityFramework,从而使得数据库的交互代码变得很简洁。返回结果有两种,对应ajax中的回调函数success回调函数中,如果返回结果的值大于0,则表示通过EntityFramework添加到数据库中的记录数;在error()回调函数中,返回结果则显示了失败的具体信息。
RequestData类继承了IHttpHandler接口,表明它是以同步的方式处理客户端请求。当然,你也可以将其改为继承IHttpAsyncHandler接口来处理异步请求,代码接口大同小异。

相关文章