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 实用的文字链提示框效果
Jun 30 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
Aug 07 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
微信小程序实现左滑删除效果
Nov 18 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-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
vue中input的v-model清空操作
2019/09/06 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
Python中struct模块对字节流/二进制流的操作教程
2017/01/21 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
简单了解python关系(比较)运算符
2019/07/08 Python
Python 导入文件过程图解
2019/10/15 Python
python tkinter 设置窗口大小不可缩放实例
2020/03/04 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python中wx模块的具体使用方法
2020/05/15 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
梅西百货官网:Macy’s
2020/08/04 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
加拿大留学自荐信
2014/01/28 职场文书
保护环境倡议书范文
2014/05/13 职场文书
环保口号大全
2014/06/12 职场文书
大专生自荐书范文
2014/06/22 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
五年级下册复习计划
2015/01/19 职场文书
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS