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跨Iframe选择实现代码
Aug 19 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jquery获取元素值的方法(常见的表单元素)
Nov 15 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
webpack实用小功能介绍
Jan 02 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
简单的PHP留言本实例代码
2010/05/09 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP模拟post提交数据方法汇总
2016/02/16 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python中关于使用模块的基础知识
2015/05/24 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
python中文编码与json中文输出问题详解
2018/08/24 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
How TDD works
2012/09/30 面试题
人力管理专业毕业生求职信
2014/02/27 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
农村门前三包责任书
2014/07/25 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python