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 相关文章推荐
node.js Web应用框架Express入门指南
May 28 Javascript
JavaScript判断表单提交时哪个radio按钮被选中的方法
Mar 21 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
使用JS监听键盘按下事件(keydown event)
Nov 07 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
解决vue做详情页跳转的时候使用created方法 数据不会更新问题
Jul 24 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桌面中心(三) 修改数据库
2007/03/11 PHP
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery实现平滑滚动的标签分栏切换效果
2015/08/28 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python学习入门之区块链详解
2017/07/25 Python
Python实现求解一元二次方程的方法示例
2018/06/20 Python
Python判断以什么结尾以什么开头的实例
2018/10/27 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python实现整数的二进制循环移位
2019/03/08 Python
python 自定义装饰器实例详解
2019/07/20 Python
Python线上环境使用日志的及配置文件
2019/07/28 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
浅谈keras2 predict和fit_generator的坑
2020/06/17 Python
python实现学生管理系统开发
2020/07/24 Python
详解Python中的Lock和Rlock
2021/01/26 Python
JAVA招聘远程笔试题
2015/07/23 面试题
五一家具促销方案
2014/01/10 职场文书
求职信格式要求
2014/05/23 职场文书