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编程起步(第五课)
Jan 10 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
获取当前点击按钮的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常用的小程序代码段
2015/11/14 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
jquery实用代码片段集合
2010/08/12 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
基于jquery打造的百分比动态色彩条插件
2012/09/19 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
node.js中的fs.readFileSync方法使用说明
2014/12/15 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
Angular Excel 导入与导出的实现代码
2019/04/17 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python django 增删改查操作 数据库Mysql
2017/07/27 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
浅谈Python中threading join和setDaemon用法及区别说明
2020/05/02 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
小学生期末评语大全
2014/04/21 职场文书
公路局群众路线教育实践活动第一阶段工作汇报
2014/10/25 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
表扬通报怎么写
2015/01/16 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS