jquery自动将form表单封装成json的具体实现


Posted in Javascript onMarch 17, 2014

前端页面:

<span style="font-size:14px;"> <form action="" method="post" id="tf"> 
<table width="100%" cellspacing="0" cellpadding="0" border="0"> 
<tr> 
<th> 
姓名: 
</th> 
<td> 
<input type="text" id="txtUserName" name="model.UserName" /> 
</td> 
<th> 
联系手机: 
</th> 
<td> 
<input type="text" name="model.Mobile" id="txtMobile" maxlength="11" /> 
</td> 
<th> 
密码: 
</th> 
<td> 
<input type="password" name="model.Pwd" id="txtPwd" maxlength="11" /> 
</td> 
</tr> 
<tr> 
<td style="text-align: center;" colspan="2"> 
<input type="button" value=" 提 交 " style="padding-top: 3px;" name="butsubmit" 
id="butsubmit" /> 
</td> 
</tr> 
</table> 
</form> 
//提示到服务器 
$(function () { 
$("#butsubmit").click(function () { 
var data = $("#tf").serializeArray(); //自动将form表单封装成json 
// $.ajax({ 
// type: "Post", //访问WebService使用Post方式请求 
// contentType: "application/json", //WebService 会返回Json类型 
// url: "/home/ratearticle", //调用WebService的地址和方法名称组合 ---- WsURL/方法名 
// data: data, //这里是要传递的参数,格式为 data: "{paraName:paraValue}",下面将会看到 
// dataType: 'json', 
// success: function (result) { //回调函数,result,返回值 
// alert(result.UserName + result.Mobile + result.Pwd); 
// } 
// }); 
$.post("/home/ratearticle", data, RateArticleSuccess, "json"); 
}); 
}) 

//结果显示 
function RateArticleSuccess(result) { 
alert(result.UserName + result.Mobile + result.Pwd); 
}</span>

后端处理:
<span style="font-size:14px;">public JsonResult ratearticle(UserInfo model) 
{ 
return Json(model); 
}</span>
Javascript 相关文章推荐
浅析javascript闭包 实例分析
Dec 25 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
JavaScript 常见的继承方式汇总
Sep 17 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 #Javascript
jquery如何根据值设置默认的选中项
Mar 17 #Javascript
jquery插件开发之实现md5插件
Mar 17 #Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 #Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 #Javascript
jquery解析JSON数据示例代码
Mar 17 #Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 #Javascript
You might like
php多文件上传下载示例分享
2014/02/20 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Javascript实例教程(19) 使用HoTMetal(5)
2006/12/23 Javascript
javascript静态的url如何传递
2007/05/03 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
[50:58]2018DOTA2亚洲邀请赛3月29日 小组赛A组OpTic VS Newbee
2018/03/30 DOTA
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python实现矩阵乘法的方法
2015/06/28 Python
Python yield与实现方法代码分析
2018/02/06 Python
详解Python安装scrapy的正确姿势
2018/06/26 Python
python随机在一张图像上截取任意大小图片的方法
2019/01/24 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
浅谈python3中input输入的使用
2019/08/02 Python
TensorFlow实现保存训练模型为pd文件并恢复
2020/02/06 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
使用Python-OpenCV消除图像中孤立的小区域操作
2020/07/05 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
党员廉洁自律承诺书
2014/05/26 职场文书
计算机应用专业毕业生求职信
2014/06/03 职场文书
煤矿安全生产标语
2014/06/06 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
会议开幕词
2015/01/28 职场文书
客房领班岗位职责
2015/02/11 职场文书
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android