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 流畅动画实现原理
Sep 08 Javascript
javascript full screen 全屏显示页面元素的方法
Sep 27 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
React手稿之 React-Saga的详解
Nov 12 Javascript
微信小程序自定义键盘 内部虚拟支付
Dec 20 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
VUE中的v-if与v-show区别介绍
Mar 13 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输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
2015/12/24 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
原生JavaScrpit中异步请求Ajax实现方法
2017/11/03 Javascript
vue生命周期实例小结
2018/08/15 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
Python中asyncore的用法实例
2014/09/29 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
python 反向输出字符串的方法
2018/07/16 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
使用Python内置模块与函数进行不同进制的数的转换
2020/04/26 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
印度尼西亚最大的电商平台:Tokopedia(印尼版淘宝)
2017/12/02 全球购物
网络维护中文求职信
2014/01/03 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
交警失职检讨书
2015/01/26 职场文书
廉洁自律个人总结
2015/02/14 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android