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 相关文章推荐
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript splice()方法详解
Sep 22 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
jQuery树形控件zTree使用小结
Aug 02 Javascript
jQuery编写网页版2048小游戏
Jan 06 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
jQuery+PHP实现上传裁剪图片
Jun 29 jQuery
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
js仿京东放大镜效果
Aug 09 Javascript
JS实现小米轮播图
Sep 21 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php根据分类合并数组的方法实例详解
2013/11/06 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
教你php如何实现验证码
2016/01/20 PHP
PHP后端银联支付及退款实例代码
2017/06/23 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
Vue.js上下滚动加载组件的实例代码
2017/07/17 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
微信小程序实现左侧滑动导航栏
2020/04/08 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
意外死亡赔偿协议书
2014/10/14 职场文书
党员干部对十八届四中全会的期盼
2014/10/17 职场文书
学校机关党总支领导班子整改工作方案
2014/10/26 职场文书
检讨书怎么写
2015/01/23 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技