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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
python爬取安居客二手房网站数据(实例讲解)
Oct 19 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
Sep 27 Javascript
Vue.Draggable实现交换位置
Apr 07 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 microtime获取浮点的时间戳
2010/02/21 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
php循环创建目录示例分享(php创建多级目录)
2014/03/04 PHP
33道php常见面试题及答案
2015/07/06 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
javascript实现网页背景烟花效果的方法
2015/08/06 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
jquery实现图片预加载
2015/12/25 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
解决vue点击控制单个样式的问题
2018/09/05 Javascript
Python中对列表排序实例
2015/01/04 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python根据日期返回星期几的方法
2015/07/06 Python
Python调用C++程序的方法详解
2017/01/24 Python
深入理解Python中的内置常量
2017/05/20 Python
Python 加密的实例详解
2017/10/09 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
Django websocket原理及功能实现代码
2020/11/14 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
几个SQL的面试题
2014/03/08 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
中药学专业毕业生推荐信
2014/07/10 职场文书
生活小常识广播稿
2014/09/16 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
关于antd tree 和父子组件之间的传值问题(react 总结)
2021/06/02 Javascript
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫