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入门之对象与JSON详解
Oct 21 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
JQuery实现动态适时改变字体颜色的方法
Mar 10 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
javascript制作sql转换为stringBuffer的小工具
Apr 03 Javascript
Node.js学习入门
Jan 03 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
Apr 09 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服务器页面间跳转实现方法
2012/08/02 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
2007/08/15 Javascript
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
js去空格技巧分别去字符串前后、左右空格
2013/10/21 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
jquery实现穿梭框功能
2021/01/19 jQuery
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
Python程序语言快速上手教程
2012/07/18 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python随机生成库faker库api实例详解
2019/11/28 Python
python实现加密的方式总结
2020/01/19 Python
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
What is EJB
2016/07/22 面试题
go设置多个GOPATH的方式
2021/05/05 Golang
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android