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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
javascript encodeURI和encodeURIComponent的比较
Apr 03 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
AngularJS使用指令增强标准表单元素功能
Jul 01 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
详解基于webpack和vue.js搭建开发环境
Apr 05 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
Vue开发实现吸顶效果的示例代码
Aug 21 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 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利用单例模式实现日志处理类库
2014/02/10 PHP
PHP启动windows应用程序、执行bat批处理、执行cmd命令的方法(exec、system函数详解)
2014/10/20 PHP
php使用glob函数快速查询指定目录文件的方法
2014/11/15 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
php查看网页源代码的方法
2015/03/13 PHP
解决ThinkPHP关闭调试模式时报错的问题汇总
2015/04/22 PHP
PHP实现XML与数据格式进行转换类实例
2015/07/29 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
Cookie跨域问题解决方案代码示例
2020/11/24 PHP
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
总结Javascript中数组各种去重的方法
2016/10/04 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
[43:18]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python获取list下标及其值的简单方法
2016/09/12 Python
python爬虫实战之最简单的网页爬虫教程
2017/08/13 Python
python 视频逐帧保存为图片的完整实例
2019/12/10 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
生物化工工艺专业应届生求职信
2013/10/08 职场文书
企业金融服务方案
2014/06/03 职场文书
奥巴马经典演讲稿
2014/09/13 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
2016教师节问候语
2015/11/10 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
Java Spring Lifecycle的使用
2022/05/06 Java/Android