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 相关文章推荐
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
javascript上传图片前预览图片兼容大多数浏览器
Oct 25 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
Jul 11 Javascript
小程序云开发实战小结
Oct 25 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 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程序猿都应该拜读的书
2014/12/31 PHP
分享一个漂亮的php验证码类
2016/09/29 PHP
js AspxButton的客户端操作
2009/06/26 Javascript
jQuery 验证插件 Web前端设计模式(asp.net)
2010/10/17 Javascript
TinyMCE 新增本地图片上传功能
2010/11/05 Javascript
Javascript 命名空间模式
2013/11/01 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
简单学习vue指令directive
2016/11/03 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
js中this对象用法分析
2018/01/05 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
2019/10/31 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
[49:43]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
设计师珠宝:Ylang 23
2018/05/11 全球购物
意大利一家专营包包和配饰的网上商店:Borse Last Minute
2019/08/26 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
介绍一下EJB的分类及其各自的功能及应用
2016/08/23 面试题
社会学专业求职信
2014/02/24 职场文书
中华魂放飞梦想演讲稿
2014/08/26 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
谢师宴邀请函
2015/02/02 职场文书
稽核岗位职责范本
2015/04/13 职场文书
小爸爸观后感
2015/06/15 职场文书
同事欢送会致辞
2015/07/31 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
postgresql使用filter进行多维度聚合的解决方法
2021/07/16 PostgreSQL