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的逻辑运算符 ||
May 31 Javascript
JavaScript版的TwoQueues缓存模型
Dec 29 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
Jun 06 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
基于JavaScript实现抽奖系统
Jan 16 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
使用Vue实现一个树组件的示例
Nov 06 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
php计算年龄精准到年月日
2015/11/17 PHP
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
自定义Vue中的v-module双向绑定的实现
2019/04/17 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
在Python中操作日期和时间之gmtime()方法的使用
2015/05/22 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
python selenium firefox使用详解
2019/02/26 Python
Python空间数据处理之GDAL读写遥感图像
2019/08/01 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
python中PyQuery库用法分享
2021/01/15 Python
struct和class的区别
2015/11/20 面试题
教师党员自我评议不足范文
2014/10/19 职场文书
廉政承诺书2015
2015/04/28 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
趣味运动会简讯
2015/07/20 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
对讲机的最大通讯距离是多少
2022/02/18 无线电