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实现IE下按backspace相当于返回操作
Mar 18 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
JS监听滚动和id自动定位滚动
Dec 18 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
vuejs实现下拉框菜单选择
Oct 23 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类中Static方法效率测试代码
2010/10/17 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
List all the Databases on a SQL Server
2007/06/21 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Python基于PycURL自动处理cookie的方法
2015/07/25 Python
python中requests小技巧
2017/05/10 Python
Python算术运算符实例详解
2017/05/31 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
使用python动态生成波形曲线的实现
2019/12/04 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
python 调用Google翻译接口的方法
2020/12/09 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
教师的实习自我鉴定
2013/12/17 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
户籍证明书标准模板
2014/09/10 职场文书
党员思想汇报材料
2014/12/19 职场文书
2015年工程部工作总结
2015/04/30 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
党小组推荐意见
2015/06/02 职场文书
电影红河谷观后感
2015/06/11 职场文书
大学同学聚会感言
2015/07/30 职场文书
贷款担保书范本
2015/09/22 职场文书