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

前台：[切记：每个表单元素， 都应该带有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. public partial class Default3 : System.Web.UI.Page

  9. {

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

  11. {

  12. if (Request.Form["Action"] == "1") {

  13. Ajax();

  14. }

  15. }

  16. private void Ajax()

  17. {

  18. StringBuilder sb = new StringBuilder();

  19. foreach (string s in Request.Form.AllKeys) {

  20. sb.AppendFormat("{0}: {1}\n",s,Request.Form[s] );

  21. }

  22. Response.Write(sb.ToString());

  23. Response.End();

  24. }

  25. }



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

前台取得值：

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: 湖南

时间： 2024-12-27 22:56:43

jquery获取表单值的利器：serialize()的相关文章

Jquery 获取表单值如input,select等方法

1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,value即控件value属性 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式 if($("input[name=row_checkbox]").attr('checked')==true) { alert("j");

jquery获取表单值

Query获取多种input值的方法 (2011-06-03 01:59:14) 转载▼ 标签: 单选 文本区域 元素 获取 文本框 jquery 多种 input值 的 方法 杂谈 分类: 转载 1 if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 name即控件name属性,value即控件value属性 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id

jquery 获取 表单值

jquery取radio单选按钮的值$("input[name='items']:checked").val();jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关 获取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获取select被选中项的文本 var item = $("select[name=items]

jQuery获取表单各元素的值

radio值获取 $("input[type='radio']:checked").val(); 2,设置指定的项为当前选中项 $("input[type='radio']").eq(1).attr("checked",true);//设置第二项为选中项 <input type="text" name="textname" id="text_id" value="&quo

javascript获取表单值的7种方式

见代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单对象--获取表单值的7种方式</title> </head> <body> <form action="" name="myform"> <input type=

jquery】常用的jquery获取表单对象的属性与值

1 [jquery]常用的jquery获取表单对象的属性与值 2 3 4 1.JQuery的概念 5 6 7 8 9 JQuery是一个JavaScript的类库,这个类库集合了很多功能方法,利用类库你可以用一些简单的代码实现一些复杂的JS效果. 10 11 12 2.JQuery实现了 代码的分离 13 14 不用再网页中加入如:onclick之类的事件来调用函数了,直接引入JQuery类库和自己编写的JQuery代码就可以了: 15 如: 16 $(function(){ 17 $("Ele

jquery获取表单数据无刷新提交

var fdata=$("form").serialize();  //获取表单的值   $.post("tiaozhuan.jsp", fdata, function (result) {//无刷新提交表单      alert(result);   })

用jquery获取表单元素

表单验证需要获得表单元素,下面是获取表单元素的方法 例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>无标题页</title> <script src="js/jquery-1.6.min.js" type="text/javascript"></script

用jQuery获取表单的值

在日常开发过程中,有许多用到表单的地方.比如登录,注册,比如支付,填写订单,比如后台管理等等. 使用jQuery来获取表单的值是比较常见的做法. 常见表单 单行文字域:<input type='text'> <input type="text" id='name' value='pelli'> 密码域:<input type='password'> <input type="password" id='pass' value