随笔- 76 文章- 0 评论- 228 阅读- 14万

【原】jQuery表单提交和后台交互

要求：仅使用jQuery提交表单和后台交互，不使用基于jQuery的表单插件

方式1、取到页面控件的值后拼接放在data中，传递到后台

页面代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>纯Jquery表单和后台交互</title>
 5     <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#btnSubmit").click(function () {
 9                 $.ajax({
10                     type: "post",
11                     url: "Handler01.ashx",
12                     data: "txtUserName=" + $.trim($("#txtUserName")[0].value) + "&txtUserPwd=" + $.trim($("#txtUserPwd")[0].value),
13                     success: function (result) {
14                         $("#msg").html(result);
15                     }
16                 });
17 
18                 return false;
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <form id="frmUserInfo" action="#">
25     <table>
26         <tr>
27             <td>
28                 姓名
29             </td>
30             <td>
31                 <input type="text" id="txtUserName" />
32             </td>
33         </tr>
34         <tr>
35             <td>
36                 密码
37             </td>
38             <td>
39                 <input type="password" id="txtUserPwd" />
40             </td>
41         </tr>
42         <tr>
43             <td colspan="2">
44                 <input type="submit" id="btnSubmit" value="提交" />
45             </td>
46         </tr>
47     </table>
48     </form>
49     <div id="msg"></div>
50 </body>
51 </html>

一般处理程序代码：

 1 using System.Web;
 2 
 3 namespace Test
 4 {
 5     /// <summary>
 6     /// Handler 的摘要说明
 7     /// </summary>
 8     public class Handler01 : IHttpHandler
 9     {
10         /// <summary>
11         /// 请求处理
12         /// </summary>
13         /// <param name="context"></param>
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17 
18             // 方式1
19             string userName = context.Request.Params["txtUserName"].ToString();
20             string userPwd = context.Request.Params["txtUserPwd"].ToString();
21 
22             context.Response.Write(string.Format("姓名：{0}，密码：{1}",userName, userPwd));
23             context.Response.End();
24         }
25 
26         public bool IsReusable
27         {
28             get
29             {
30                 return false;
31             }
32         }
33     }
34 }

----------------------------------------------------------------------------------------------------------------------------

方式2、页面序列化后放在data中，传递到后台

注：此种方式需设置页面控件的name属性

页面代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>纯Jquery表单和后台交互</title>
 5     <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             $("#btnSubmit").click(function () {
 9                 $.ajax({
10                     type: "post",
11                     url: "Handler02.ashx",
12                     data: $("#frmUserInfo").serialize(),
13                     success: function (result) {
14                         $("#msg").html(result);
15                     }
16                 });
17 
18                 return false;
19             });
20         });
21     </script>
22 </head>
23 <body>
24     <form id="frmUserInfo" action="#">
25     <table>
26         <tr>
27             <td>
28                 姓名
29             </td>
30             <td>
31                 <input type="text" id="txtUserName" name="txtUserName" />
32             </td>
33         </tr>
34         <tr>
35             <td>
36                 密码
37             </td>
38             <td>
39                 <input type="password" id="txtUserPwd" name="txtUserPwd" />
40             </td>
41         </tr>
42         <tr>
43             <td colspan="2">
44                 <input type="submit" id="btnSubmit" value="提交" />
45             </td>
46         </tr>
47     </table>
48     </form>
49     <div id="msg"></div>
50 </body>
51 </html>

一般处理程序代码：

 1 using System.Web;
 2 
 3 namespace Test
 4 {
 5     /// <summary>
 6     /// Handler 的摘要说明
 7     /// </summary>
 8     public class Handler02 : IHttpHandler
 9     {
10         /// <summary>
11         /// 请求处理
12         /// </summary>
13         /// <param name="context"></param>
14         public void ProcessRequest(HttpContext context)
15         {
16             context.Response.ContentType = "text/plain";
17 
18             // 方式2（对应表单序列化）
19             string userName = context.Request.Form["txtUserName"].ToString();
20             string userPwd = context.Request.Form["txtUserPwd"].ToString();
21 
22             context.Response.Write(string.Format("姓名：{0}，密码：{1}", userName, userPwd));
23             context.Response.End();
24         }
25 
26         public bool IsReusable
27         {
28             get
29             {
30                 return false;
31             }
32         }
33     }
34 }