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进行拖拽
Jul 20 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
用jQuery中的ajax分页实现代码
Sep 20 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
使用Vue自定义数字键盘组件(体验度极好)
Dec 19 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
获取当前点击按钮的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
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP实现AES256加密算法实例
2014/09/22 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
php7基于递归实现删除空文件夹的方法示例
2017/06/15 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
来自chinaz的ajax获取评论代码
2008/05/03 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
jquery单选框radio绑定click事件实现方法
2015/01/14 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
JavaScript中Object值合并方法详解
2017/12/22 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
python+pygame简单画板实现代码实例
2017/12/13 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
Python类中self参数用法详解
2020/02/13 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
Python实现读取并写入Excel文件过程解析
2020/05/27 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
电气工程和自动化自荐信范文
2013/12/25 职场文书
小学国庆节活动方案
2014/02/11 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
医学求职自荐信
2014/06/21 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
详解nginx location指令
2022/01/18 Servers