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对象链式操作代码(jquery)
Jul 04 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
jQuery 1.8 Release版本发布了
Aug 14 Javascript
火狐下table中创建form导致两个table之间出现空白
Sep 02 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 Javascript
解决Vue编译时写在style中的路径问题
Sep 21 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 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
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
jQuery之end()和pushStack()使用介绍
2012/02/07 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
javascript 删除数组元素和清空数组的简单方法
2017/02/24 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
webpack手动配置React开发环境的步骤
2018/07/02 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Python的randrange()方法使用教程
2015/05/15 Python
Python多线程和队列操作实例
2015/06/21 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python数据抓取爬虫代理防封IP方法
2018/12/23 Python
django 实现简单的插入视频
2020/04/07 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
秘书岗位职责
2013/11/18 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
学生自我评价范文
2014/02/02 职场文书
母婴店促销方案
2014/03/05 职场文书
2015年评职称个人工作总结
2015/10/15 职场文书
Python如何配置环境变量详解
2021/05/18 Python
MySQL图形化管理工具Navicat安装步骤
2021/12/04 MySQL