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 相关文章推荐
js实现飞入星星特效代码
Oct 17 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
Jun 29 Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
Aug 05 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
浅谈本地WAMP环境的搭建
2015/05/13 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
CI框架常用经典操作类总结(路由,伪静态,分页,session,验证码等)
2016/11/21 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
JS数组splice操作实例分析
2019/10/12 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
js实现星星打分效果
2020/07/05 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python解析xml中dom元素的方法
2015/03/12 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python获取Pandas列名的几种方法
2019/08/07 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
python 正则表达式贪婪模式与非贪婪模式原理、用法实例分析
2019/10/14 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
日本乐天德国站:Rakuten.de
2019/05/16 全球购物
巧克力蛋糕店创业计划书
2014/01/14 职场文书
北京故宫导游词
2015/01/31 职场文书
销售经理工作检讨书
2015/02/19 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android