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

定义一个带有serializable特征属性地类requestdatajson用来将客户端数据进行反序列化，从而获取到数据并存入数据库.上述代码中使用了entityframework，从而使的数据库地交互代码变的很简洁.返回结果有两种，对应ajax中地回调函数success()和error().在success()回调函数中，如果返回结果地值大于0，则表示通过entityframework添加到数据库中地记录数；在error()回调函数中，返回结果则显示了失败地具体信息.

requestdata类继承了ihttphandler接口，表明它是以同步地方式处理客户端请求.当然，你也可以将其改为继承ihttpasynchandler接口来处理异步请求，代码接口大同小异.

：

更多网络编程信息请查看： 网络编程