JQuery以JSON方式提交数据到服务端示例代码

 更新时间:2014年05月05日 15:38:04   作者:  
这篇文章主要介绍了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接口来处理异步请求,代码接口大同小异。

相关文章

  • jquery通过select列表选择框对表格数据进行过滤示例

    jquery通过select列表选择框对表格数据进行过滤示例

    这篇文章主要介绍了jquery通过select列表选择框对表格数据进行过滤示例,需要的朋友可以参考下
    2014-05-05
  • jQuery中:disabled选择器用法实例

    jQuery中:disabled选择器用法实例

    这篇文章主要介绍了jQuery中:disabled选择器用法,实例分析了:disabled选择器功能、定义及选取所有禁用的表单元素的技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery解析json数据实例分析

    jQuery解析json数据实例分析

    这篇文章主要介绍了jQuery解析json数据的具体实现方法,结合实例形式较为详细的分析了jQuery解析json格式数据的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • jQuery结合CSS制作动态的下拉菜单

    jQuery结合CSS制作动态的下拉菜单

    这篇文章主要介绍了jQuery结合CSS制作一个动态的下拉菜单,下拉菜单可以弥补空间的不足,感兴趣的小伙伴们可以参考一下
    2015-10-10
  • Jquery操作cookie记住用户名

    Jquery操作cookie记住用户名

    jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取、写入、删除 cookie。接下来通过本文给大家介绍Jquery操作cookie记住用户名,需要的朋友参考下吧
    2016-03-03
  • jquery实现心算练习代码

    jquery实现心算练习代码

    实现代码的过程中,有两个问题很棘手,一个是开始按钮连续单击,计时时间会迅速加快;二是如何判定玩家单击哪个按钮。
    2010-12-12
  • 使用jQuery给input标签设置默认值

    使用jQuery给input标签设置默认值

    这篇文章主要介绍使用jQuery给input标签设置默认值的方法,实例讲解,非常实用,需要的朋友可以参考下。
    2016-06-06
  • 浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

    下面小编就为大家带来一篇浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • html5的自定义data-*属性和jquery的data()方法的使用示例

    html5的自定义data-*属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
    2013-08-08
  • jQuery中将函数赋值给变量的调用方法

    jQuery中将函数赋值给变量的调用方法

    当函数作为其他函数的参数时和独立调用时,写法是有区别的,前者不用附加(),而后者必须加()
    2012-03-03

最新评论