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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
基于three.js实现的3D粒子动效实例代码
Apr 09 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
原生JS实现京东查看商品点击放大
Dec 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/01/27 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
vue+node+webpack环境搭建教程
2017/11/05 Javascript
浅谈从React渲染流程分析Diff算法
2018/09/08 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
python实现得到一个给定类的虚函数
2014/09/28 Python
python网络编程调用recv函数完整接收数据的三种方法
2017/03/31 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
python turtle库画一个方格和圆实例
2019/06/27 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Python实现从N个数中找到最大的K个数
2020/04/02 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
python boto和boto3操作bucket的示例
2020/10/30 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
怎么写好自荐书
2014/03/02 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年大学班长工作总结
2014/11/14 职场文书
2016年校长新年寄语
2015/08/17 职场文书