jQuery ajax中使用serialize() 方法提交表单数据
<head runat="server">
<title></title>
<link href="Styles/default.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="Scripts/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#button").click(function () {
$.ajax({
cache: true,
type: "POST",
url: 'ashx/GetTree.ashx?action=Ajax',//提交的URL
data: $('#form1').serialize(), // 要提交的表单,必须使用name属性
async: false,
success: function (data) {
$("#common").html(data);//输出提交的表表单
},
error: function (request) {
alert("Connection error");
}
});
});
});
</script>
</head>
<body style="background: white">
<form id="form1" runat="server">
<div id="divU" style="height: 200px">
<table cellpadding="0" cellspacing="1px" border="0" style="width: 100%;" bgcolor="b5d6e6">
<tr style="background-color: White; height: 32px;">
<td style="width: 80px; padding-left: 5px">
姓名:
</td>
<td style="padding: 5px">
<input name="name" type="text"></input>
</td>
</tr>
<tr style="background-color: White; height: 32px;">
<td style="width: 80px; padding-left: 5px">
邮箱:
</td>
<td style="padding: 5px">
<input name="email" type="text"></input>
</td>
</tr>
<tr style="background-color: White; height: 32px;">
<td style="width: 80px; padding-left: 5px">
电话:
</td>
<td style="padding: 5px">
<input name="phone" type="text"></input>
</td>
</tr>
<tr style="background-color: White; height: 32px;">
<td style="width: 80px; padding-left: 5px">
</td>
<td style="padding: 5px">
<input type="button" id="button" value="提交"></input>
</td>
</tr>
</table>
<div id="common">
</div>
</div>
</form>
</body>
</html>
2 <head runat="server">
3 <title></title>
4 <link href="Styles/default.css" rel="stylesheet" type="text/css" />
5 <link href="Scripts/jquery-easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
6 <link href="Scripts/jquery-easyui/themes/icon.css" rel="stylesheet" type="text/css" />
7 <script src="Scripts/jquery-easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
8 <script src="Scripts/jquery-easyui/jquery.easyui.min.js" type="text/javascript"></script>
9 <script src="Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
10 <script type="text/javascript">
11 $(document).ready(function () {
12 $("#button").click(function () {
13 $.ajax({
14 cache: true,
15 type: "POST",
16 url: 'ashx/GetTree.ashx?action=Ajax',//提交的URL
17 data: $('#form1').serialize(), // 要提交的表单
18 async: false,
19 success: function (data) {
20 $("#common").html(data);
21 }，
22 error: function (request) {
23 alert("Connection error");
24 }
25 });
26 });
27
28 });
29
30
31 </script>
32 </head>
33 <body style="background: white">
34 <form id="form1" runat="server">
35 <div id="divU" style="height: 200px">
36 <table cellpadding="0" cellspacing="1px" border="0" style="width: 100%;" bgcolor="b5d6e6">
37 <tr style="background-color: White; height: 32px;">
38 <td style="width: 80px; padding-left: 5px">
39 Name:
40 </td>
41 <td style="padding: 5px">
42 <input name="name" type="text"></input>
43 </td>
44 </tr>
45 <tr style="background-color: White; height: 32px;">
46 <td style="width: 80px; padding-left: 5px">
47 Email:
48 </td>
49 <td style="padding: 5px">
50 <input name="email" type="text"></input>
51 </td>
52 </tr>
53 <tr style="background-color: White; height: 32px;">
54 <td style="width: 80px; padding-left: 5px">
55 Phone:
56 </td>
57 <td style="padding: 5px">
58 <input name="phone" type="text"></input>
59 </td>
60 </tr>
61 <tr style="background-color: White; height: 32px;">
62 <td style="width: 80px; padding-left: 5px">
63 </td>
64 <td style="padding: 5px">
65 <input type="button" id="button" value="提交"></input>
66 </td>
67 </tr>
68 </table>
69 <div id="common">
70 </div>
71 </div>
72 </form>
73 </body>
74 </html
jQuery ajax：
type: "POST",
url: ajaxCallUrl,
data: "Key=Value&Key2=Value2",
success: function(msg){alert(msg);}
});
ajax serialize():
type: "POST",
url:ajaxUrl,
data:$('#form1').serialize(),// 要提交的表单
success: function(msg) {alert(msg);}
});
