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


Posted in Javascript onMay 05, 2014

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接口来处理异步请求,代码接口大同小异。

Javascript 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
vue axios登录请求拦截器
Apr 02 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
Apr 09 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
JavaScript实现两个数组的交集
Mar 25 Javascript
使用jQuery重置(reset)表单的方法
May 05 #Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
May 05 #Javascript
Js操作树节点自动折叠展开的几种方法
May 05 #Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 #Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 #Javascript
一个简单的jquery的多选下拉框(自写)
May 05 #Javascript
JavaScript日期时间格式化函数分享
May 05 #Javascript
You might like
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP查询大量数据内存耗尽问题的解决方法
2016/10/28 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
php查询内存信息操作示例
2019/05/09 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
AngularJS使用指令增强标准表单元素功能
2016/07/01 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
python3库numpy数组属性的查看方法
2018/04/17 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
django模型动态修改参数,增加 filter 字段的方式
2020/03/16 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
体育运动口号
2014/06/09 职场文书
商场周年庆活动方案
2014/08/19 职场文书
追悼会答谢词
2015/01/05 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
停车场管理制度范本
2015/08/05 职场文书
Python torch.flatten()函数案例详解
2021/08/30 Python