1. 程式人生 > >js表單序列化

js表單序列化

鏈接 分享圖片 data ssr 好的 其他 ces ucc lis

 

原文鏈接

做項目的過程中,表單是必不可少的,經常用來提供數據。為了獲取表單數據,必須將字段的值逐個添加到參數中,如果表單的數據量非常大,不僅添加字段參數的過程無疑是痛苦的,而且表單也缺乏彈性。但是jquery中提供了一個很好的處理表單數據的函數——serialize();

  這個函數可以把表單中的值序列化為字符串。下面是net小夥的測試代碼(主要功能:輸入用戶名和密碼,並在下面的p中顯示出來):

前臺界面設計如下:

技術分享圖片
1 <form action="" id="form1">
2     用戶名:<input name="name" type="text" /><br />
3     密 碼:<input name="pass" type="text" /><br />
4 
5 </form>
6     <input type="button" id="sub" value="提交" /> <br />
7     <p id="result"></p>
技術分享圖片

添加一個一般處理程序文件,代碼如下:

技術分享圖片
1         public void ProcessRequest(HttpContext context)
2         {
3             context.Response.ContentType = "text/plain";
4             //context.Response.Write("Hello World");
5             string username = context.Request["name"];
6             string password = context.Request["pass"];
7             context.Response.Write(username + password);
8 
9         }
技術分享圖片

引用jquery庫,然後編寫javascript代碼:

技術分享圖片
 1     <script type="text/javascript">
 2         $(function () {
 3             $("#sub").click(function () {
 4                 var rerial = $("#form1").serialize();
 5                 $.post("ashx/formlists.ashx", rerial, function (data, status) {
 6                     if (status == "success") {
 7                         $("#result").html(data);
 8                     }
 9                 });
10 
11             });
12 
13         });
14     </script>
技術分享圖片

需要註意的事項是:表單中的input必須有name這個屬性,因為一般處理程序中請求參數是通過name屬性來獲取參數的值;net小夥在剛開始用了id這個屬性,但是是了一天都沒試出來。經測試發現得到的值總是空值,然後在W3C上看了一下使用方法,又對比了自己的代碼,發現只有name屬性缺少了,其他的都一樣,然後添加了name屬性就ok了!

js表單序列化