jquery自动将form表单封装成json的具体实现_jquery

前端页面:

复制代码 代码如下:

<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>

时间: 2024-10-26 11:30:08

jquery自动将form表单封装成json的具体实现_jquery的相关文章

jquery自动将form表单封装成json的具体实现

 这篇文章主要介绍了jquery自动将form表单封装成json的具体实现,需要的朋友可以参考下 前端页面:  代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf">  <table width="100%" cellspacing="0" cellpadding

jQuery ajax提交Form表单实例(附demo源码)_jquery

本文实例讲述了jQuery ajax提交Form表单的方法.分享给大家供大家参考,具体如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法 如Form代码如下: <form id="Form1" action="action.aspx" method="post" > 名称:<input

把表单转成json,并且name为key,value为值

http://jsfiddle.net/sxGtM/3/http://stackoverflow.com/questions/1184624/convert-form-data-to-js-object-with-jquery /*把表单转成json,并且name为key,value为值*/ $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { i

jquery把form表单保存成对象传给接口

在模板式开发时,我们form表单可以直接提交到服务器相应的方法,服务器就可以进行处理,但在新的移动端,用的比较多的是以json数据格式的传输,和服务器端的接口交互,这样我们需要把传统的form表单元素组合成我们想要的对象,再传输给接口. 下面是个例子: <form action="" id="form" method="post">  <input type="hidden" name="id&qu

jQuery动态设置form表单的enctype值(实现代码

本篇文章是对在jQuery中动态设置form表单的enctype值的实现代码进行了详细的分析介绍,需要的朋友参考下   代码简单, 注意2个地方enctype和encoding 复制代码 代码如下: $("#form").attr("enctype", "multipart/form-data");             $("#form").attr("encoding", "multipar

基于Bootstrap+jQuery.validate实现Form表单验证_jquery

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <title>Bootstrap Form Template</title>         

jquery获取form表单input元素值的简单实例_jquery

一般取值方法 $("#id").val(); $("#id").attr("value");  //其中value是元素的属性名如<s:textfield  id="cifName" key="cifName"   name="#request.consBean.cifName" />的id,key,name属性.取到的值是属性后对应双引号里面的字符. function sa

jquery的ajax提交form表单的两种方法小结(推荐)_jquery

jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

浅谈jquery采用attr修改form表单enctype不起作用的问题_jquery

做文件上传,需要将表单元素的enctype设置为'multipart/form-data',用jquery的attr方法在目前较新的主流浏览器上测试均可成功,唯独IE下死活不行.后来查阅ie浏览器6,7,8(9+由于开发机为xp,未进行测试)不支持attr的方式来修改enctype属性,需要通过dom元素的原生方法来设置, 代码如下: $('#form1').get(0).encoding = 'multipart/form-data'; 以上这篇浅谈jquery采用attr修改form表单en