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

前端页面:<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-07-28 17:31:58

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

js将form表单转成json

<!DOCTYPE html> <head></head> <body> <form id="register"> <input type="text" name="user" value="hpc"><br> <input type="text" name="pwd" value="12

JQuery将form表单值转换成json字符串函数

由于后台接口限定,必须要将表单内容转换成json字符串提交,因此写了一个将form表单值转成json字符串的函数.     前提:页面引入了JQuery 下面直接上代码 一.代码 /** 表单序列化成json字符串的方法 */ function form2JsonString(formId) { var paramArray = $('#' + formId).serializeArray(); /*请求参数转json对象*/ var jsonObj={}; $(paramArray).each

jquery将form表单序列化常json

var formData = {};$.each(form.serializeArray(),function(i, item){ formData[item.name] = item.value;}); $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { al

Jquery来对form表单提交(mvc方案)

来自:http://www.cnblogs.com/lmfeng/archive/2011/06/18/2084325.html 我先说明一下,这是asp.net mvc 里面的用法, Jquery来对form表单提交,下面是一个form表单,里面没有action字段,我们来用Jquery注册事件进行提交, <form method="post" id="documentForm">    <input type="hidden"

form表单序列化为json格式数据

在web开发过程中,经常遇到将form序列化不能格式的字符串提交到后台,下面就介绍怎样将form表单序列化为json字符串. 首先,是扩展的jquery序列化插件,依赖jquery.经测试,这段代码可以放在$(funciton(){})中,也可以放在外面,都可以实现效果. $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.

把表单转成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

第83天:jQuery中操作form表单

操作form表单 1. 属性操作 设置属性: // 第一个参数表示:要设置的属性名称 // 第二个参数表示:该属性名称对应的值 $(selector).attr("title", "传智播客"); 获取属性: // 参数为:要获取的属性的名称,改操作会返回指定属性对应的值 $(selector).attr("title"); 此时,返回指定属性的值 移除属性: // 参数为:要移除的属性的名称 $(selector).removeAttr(&qu

把表单数据封装成json格式 插件可用

来源:https://github.com/macek/jquery-serialize-object 请看 文件里面的jquery-serialize-object-master.zip 有一个文件:jquery.serialize-object.js , 是用来 把表单 数据  进行JSON 格式. 用法: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&q

通过js,修改所有form表单,提交JSON格式的数据

直接上代码 <script>$(function(){ //获取网页中所有的form表单 $("form").each(function(){ //注册表单的提交事件 $(this).submit(function(event) { //屏蔽表单的注册 event.preventDefault(); //获取url var url = $(this).attr("action"); request(url, 'POST', JSON.stringify(