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 相关文章推荐
jQuery的链式调用浅析
Dec 03 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
jQuery ready()和onload的加载耗时分析
2016/09/08 Javascript
Bootstrap对话框使用实例讲解
2016/09/24 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
2017/07/19 Javascript
解析Vue2 dist 目录下各个文件的区别
2017/11/22 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
微信小程序时间标签和时间范围的联动效果
2019/02/15 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
Python的Tornado框架异步编程入门实例
2015/04/24 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python中pyqtgraph知识点总结
2021/01/26 Python
css3进阶之less实现星空动画的示例代码
2019/09/10 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
2020/08/24 HTML / CSS
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
新媒传信软件测试面试题
2013/02/24 面试题
应届毕业生自我鉴定范文
2013/12/27 职场文书
激励员工的口号
2014/06/16 职场文书
代领报检证委托书范本
2014/10/11 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
会计求职简历自我评价
2015/03/10 职场文书
部门主管竞聘书
2015/09/15 职场文书