serializeArray()与 serialize()

serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。可以选择一个或多个表单元素(比如 input 及/或文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。举例:使用ajax时,常常需要拼装input数据为'name=xiaoming&sex=1'这种形式,用JQuery的serialize方法可以轻松的完成这个工作。

 

serializeArray()序列化表元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。 此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作。

 

jquery.json插件(点我下载)

使用serializeArray( ) 配合 $.toJSON 方法, 我们可以很方便的获取表单对象的JSON, 并且转换为JSON字符串

 

 

 

客户端代码:

[html] view plaincopyprint?

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JquerySerialize.aspx.cs"  

  2.     Inherits="JqueryAjaxTest.JquerySerialize" %>  

  3.   

  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  5. <html xmlns="http://www.w3.org/1999/xhtml">  

  6. <head runat="server">  

  7.     <title>Jquery Ajax Test</title>  

  8.     <%--引入Jquery库--%>  

  9.     <script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>  

  10.     <%--引入用于处理Json的插件--%>  

  11.     <script src="Scripts/jquery.json-2.3.min.js" type="text/javascript"></script>  

  12.     <script type="text/javascript">  

  13.   

  14.         $(document).ready(function () {  

  15.             $("#submit").click(function () {  

  16.                 //序列表单内容为字符串,绑定到DIV.result1  

  17.                 $("#result1").append("<tt>" + $("form").serialize() + "</tt>");  

  18.   

  19.                 //系列化表单元素为Json对象  

  20.                 var Jsonfields = $("select,:text, :radio,:checkbox").serializeArray();  

  21.                 //将Json对象绑定到Div.result2  

  22.                 $("#result2").append($.toJSON(Jsonfields));  

  23.                 //处理Json对象转化为字符串绑定到DIV.result3  

  24.                 jQuery.each(Jsonfields, function (i, field) {  

  25.                     $("#result3").append(field.name + ":" + field.value + " ");  

  26.                 });  

  27.   

  28.   

  29.                 //序列表单内容为字符串,传递到服务器,返回结果绑定到Div.result4  

  30.                 var Jsonform = $("form").serialize();  

  31.                 $.ajax({  

  32.                     url: "Data/SubmitForm.aspx",  

  33.                     type: "get",  

  34.                     data: Jsonform,  

  35.                     success: function (data) {  

  36.                         $("#result4").html(data);  

  37.                     }  

  38.                 });  

  39.   

  40.                 //给结果加上红色边框  

  41.                 $("#result").css("border", "1px solid red");  

  42.             });  

  43.         });  

  44.     </script>  

  45. </head>  

  46. <body>  

  47.     <form>  

  48.         <div>  

  49.             <select name="single">  

  50.                 <option selected="selected">Single1</option>  

  51.                 <option>Single2</option>  

  52.             </select>  

  53.         </div>  

  54.         <div>  

  55.             <input type="text" name="txt" value="txt1" /></div>  

  56.         <div>  

  57.             <input type="hidden" name="hid" value="hid1" /></div>  

  58.         <div>  

  59.             <textarea name="txtarea" rows="3" cols="40">txtarea</textarea>  

  60.         </div>  

  61.         <div>  

  62.             <input type="checkbox" name="check" value="check1" checked="checked" />  

  63.             check1  

  64.             <input type="checkbox" name="check" value="check2" />  

  65.             check2</div>  

  66.         <div>  

  67.             <input type="radio" name="radio" value="radio1" checked="checked" />  

  68.             radio1  

  69.             <input type="radio" name="radio" value="radio2" />  

  70.             radio2</div>  

  71.         <div>  

  72.             <input type="button" id="submit" name="sub" value="显示结果" />  

  73.         </div>  

  74.     </from>  

  75.     <div id="result">  

  76.         <div id="result1">  

  77.             serialize表单的结果为:  

  78.         </div>  

  79.         <div id="result2">  

  80.             serializeArray返回Json对象:  

  81.         </div>  

  82.         <div id="result3">  

  83.             serializeArray返回Json对象经过处理得到的字符串:  

  84.         </div>  

  85.         <div id="result4">  

  86.         </div>  

  87.     </div>  

  88. </body>  

  89. </html>  

 

服务端代码:

[csharp] view plaincopyprint?

  1. using System;  

  2. using System.Collections.Generic;  

  3. using System.Linq;  

  4. using System.Web;  

  5. using System.Web.UI;  

  6. using System.Web.UI.WebControls;  

  7.   

  8. namespace JqueryAjaxTest  

  9. {  

  10.     public partial class SubmitForm : System.Web.UI.Page  

  11.     {  

  12.         protected void Page_Load(object sender, EventArgs e)  

  13.         {  

  14.             string single=HttpContext.Current.Request["single"];  

  15.             string txt=HttpContext.Current.Request["txt"];  

  16.             string hid=HttpContext.Current.Request["hid"];  

  17.             string txtarea=HttpContext.Current.Request["txtarea"];  

  18.             string check=HttpContext.Current.Request["check"];  

  19.             string radio=HttpContext.Current.Request["radio"];  

  20.   

  21.             Response.Clear();  

  22.             Response.Write("服务器接收到的表单键值对为:</br>" + "single/" + single + "," + "txt/" +  

  23.                 txt + "," + "hid/" + hid + "," + "txtarea/" + txtarea + "," + "check/" + check + "," + "radio/" + radio);  

  24.             Response.End();  

  25.         }  

  26.     }  

  27. }  


 

注意:标签名字不能使用js关键字,否则很可能出现冲突,导致返回数据为空。

转自:http://blog.csdn.net/shan9liang/article/details/7868162

你可能感兴趣的:(json)