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 相关文章推荐
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
Oct 17 Javascript
jQuery写fadeTo示例代码
Feb 21 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
input框中的name和id的区别
Nov 16 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
微信小程序云开发详细教程
May 16 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 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类型约束用法示例
2016/09/28 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
2010/02/15 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[02:10]DOTA2 TI10勇士令状玩法及不朽Ⅰ展示:焕新世界,如你所期
2020/05/29 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
VSCode下配置python调试运行环境的方法
2018/04/06 Python
Python命名空间的本质和加载顺序
2018/12/17 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
介绍下Java中==和equals的区别
2013/09/01 面试题
营销专业应届生求职信
2013/11/26 职场文书
学雷锋的心得体会
2014/09/04 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
大学毕业晚会开场白
2015/05/29 职场文书
小学校长开学致辞
2015/07/29 职场文书
保外就医申请书范文
2015/08/06 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL