首页 > 代码库 > jquery获取表单值的利器：serialize()

jquery获取表单值的利器：serialize()

2024-07-04 01:07:56   229人阅读

前台：[切记：每个表单元素， 都应该带有name， 否则是取不到的。]

 

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>  
  7.     <script type="text/javascript">  
  8.         function test() {  
  9.             $("#Action").val(1);  
  10.             var vals = $("#tableForm :input").serialize(); //var vals = $("#form1").serialize();//两种都可以，但后一种会多取__ViewState这个系统hidden  
  11.             $.post("Default3.aspx", vals, function (data) {  
  12.                 alert("前台取得值：\n" + vals+"\n后台取得值：\n"+data);  
  13.             });  
  14.         }  
  15.     </script>  
  16. </head>  
  17. <body>  
  18. <form id="form1" runat="server">  
  19.     <table id="tableForm" style="border-collapse:collapse;" cellpadding="5" cellspacing="2" border="1">  
  20.         <tr><td>姓名:</td><td><input id="Name" name="Name" type="text" value="刘 军" /><input id="Action" name="Action" type="hidden" value="0" /></td></tr>  
  21.         <tr><td>密码:</td><td><input id="Pwd" name="Pwd" type="password" value="123456" /></td></tr>  
  22.         <tr><td>性别:</td><td>  
  23.             <input name="Gender" type="radio" checked="checked" value="Male" />男&nbsp;&nbsp;   
  24.             <input name="Gender" type="radio" value="Female" />女</td>  
  25.         </tr>  
  26.         <tr><td>爱好：</td><td>  
  27.             <input id="Checkbox1" type="checkbox" checked="checked"  name="Hobby" value="1" />足球&nbsp;   
  28.             <input id="Checkbox2" type="checkbox" checked="checked"  name="Hobby" value="2" />象棋</td>  
  29.         </tr>  
  30.         <tr><td>留言：</td><td><textarea id="Note" name="Note" cols="20" rows="2">+  |</textarea></td></tr>  
  31.         <tr><td>籍贯：</td><td>  
  32.             <select id="Select1" name="Home" >  
  33.                 <option value="">---请选择---</option>  
  34.                 <option value="湖南" selected="selected">湖南</option>  
  35.                 <option value="湖北">湖北</option>  
  36.             </select></td>  
  37.         </tr>  
  38.         <tr><td colspan="2"><input id="Button1" type="button" value="测试" onclick="test()" /></td></tr>  
  39.     </table>  
  40. </form>  
  41. </body>  
  42. </html>  

 


 

后台：

 

[csharp] view plaincopy
  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. using System.Text;  
  8.   
  9. public partial class Default3 : System.Web.UI.Page  
  10. {  
  11.     protected void Page_Load(object sender, EventArgs e)  
  12.     {  
  13.         if (Request.Form["Action"] == "1") {  
  14.             Ajax();  
  15.         }  
  16.     }  
  17.   
  18.     private void Ajax()  
  19.     {  
  20.         StringBuilder sb = new StringBuilder();  
  21.         foreach (string s in Request.Form.AllKeys) {  
  22.             sb.AppendFormat("{0}: {1}\n",s,Request.Form[s] );  
  23.         }  
  24.         Response.Write(sb.ToString());  
  25.         Response.End();  
  26.     }  
  27. }  

 


 

——————————————   结果   —————————————

 

前台取得值：

Name=%E5%88%98+%E5%86%9B&Action=1&Pwd=123456&Gender=Male&Hobby=1&Hobby=2&Note=%2B++%7C&Home=%E6%B9%96%E5%8D%97
后台取得值：
Name: 刘 军
Action: 1
Pwd: 123456
Gender: Male
Hobby: 1,2
Note: +  |
Home: 湖南


联系
我们