【原】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 }
----------------------------------------------------------------------------------------------------------------------------
运行效果如图：
