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延时加载之defer测试
Dec 28 Javascript
JS Pro-深入面向对象的程序设计之继承的详解
May 07 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
js判断是否按下了Shift键的方法
Jan 27 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
vue增删改查的简单操作
Jul 15 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
react结合bootstrap实现评论功能
May 30 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
node.js插件nodeclipse安装图文教程
2020/10/19 Javascript
Ionic如何实现下拉刷新与上拉加载功能
2016/06/03 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现银行实战系统
2020/02/26 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
五年级科学教学反思
2014/02/05 职场文书
学期评语大全
2014/04/30 职场文书
精神文明建设标语
2014/06/16 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书