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的弹出警告对话框美化插件(警告,确认和提示)
Jun 10 Javascript
基于jquery的表格排序
Sep 11 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
Jquery api 速查表分享
Jan 12 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue实现百度语音合成的实例讲解
Oct 14 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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实现ODBC数据分页显示一例
2006/10/09 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
ThinkPHP采用GET方式获取中文参数查询无结果的解决方法
2014/06/26 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
基于jquery的合并table相同单元格的插件(精简版)
2011/04/05 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
jQuery实现点击图片翻页展示效果的方法
2015/02/16 Javascript
jquery实现邮箱自动填充提示功能
2015/11/17 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
jQuery ajax调用webservice注意事项
2017/10/08 jQuery
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
Python实现的字典值比较功能示例
2018/01/08 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
python实现电子产品商店
2019/02/26 Python
Python 解码Base64 得到码流格式文本实例
2020/01/09 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
线程的基本概念、线程的基本状态以及状态之间的关系
2012/10/26 面试题
竞选劳动委员演讲稿
2014/04/28 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
公司庆典主持词
2015/07/04 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
高二语文教学反思
2016/02/16 职场文书
分析Python list操作为什么会错误
2021/11/17 Python