Jquery提交form表单

前台代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Js_submit.aspx.cs" Inherits="Ctrip.Corp.Report.OfflineSite.CorpReportSetting.Js_submit" %>
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>Jquery快速提交form表单</title>
 6     <link type="text/css" href="../Content/Css/StyleSheet.css" rel="Stylesheet" />
 7     <script type="text/javascript" src="../Content/js/jquery.min.js"></script>
 8     <script type="text/javascript" src="../Content/js/jquery.form.js"></script>
 9 </head>
10 <body>
11 
12 <form id="form1" action="?Action=AddCustomer" method="post">
13     <p><b>新增客户资料</b></p>
14     <span>Name: </span><input type="text" name="Name" value="abc" /><br />
15     <span>Age: </span><input type="text" name="Age" value="20" /><br />
16     <span>Address: </span><input type="text" name="Address" value="武汉" /><br />
17     <span>Tel:</span> <input type="text" name="Tel" value="12345678" /><br />
18     <span>Email: </span><input type="text" name="Email" value="test@163.com" /><br />
19     <br />
20     <input type="submit" name="btnAddCustomer" value="保存客户资料" />
21 </form>
22 
23 <hr />
24 <p><b>服务器返回的结果：</b></p>
25 <textarea id="output" cols="20" rows="50" style="width: 90%; height: 200px"></textarea>
26 
27 
28 <script type="text/javascript">
29     $(function () {
30         // 只需要下面这个调用就可以将表单改成异步提交方式！
31         var options = {
32             success: showResponse,
33             resetForm: true,
34 //            url: "../user/msg.do?d=sendMsgByAjax"
35         };
36         $("#form1").ajaxForm(options);
37     });
38      
39     function showResponse(result){//回调函数   
40        if(1 == result){   
41           alert("信息发送成功！");   
42      }else{   
43           $("#output").val(result);
44       }   
45     }  
46 
47 </script>
48 
49 </body>
50 </html>

后台代码

 1  public partial class Js_submit : Page
 2     {
 3         protected void Page_Load(object sender, EventArgs e)
 4         {
 5             string action = "";
 6             Customer customer = new Customer();
 7             if (!string.IsNullOrEmpty(Request.QueryString["Action"]))//获取form的Action中的参数
 8             {
 9                 action = Request.QueryString["Action"].Trim();//去掉空格
10             }
11 
12             switch (action)
13             {
14                 case "AddCustomer":
15                     if (!string.IsNullOrEmpty(Request.Form["Address"]) && !string.IsNullOrEmpty(Request.Form["Age"])
16                         && !string.IsNullOrEmpty(Request.Form["Email"]) && !string.IsNullOrEmpty(Request.Form["Name"]) && !string.IsNullOrEmpty(Request.Form["Tel"]))//获取form中的参数
17                     {
18                         customer.Address = Request.Form["Address"].ToString();
19                         customer.Age = Convert.ToInt32( Request.Form["Age"]);
20                         customer.Email = Request.Form["Email"].ToString();
21                         customer.Name = Request.Form["Name"].ToString();
22                         customer.Tel = Request.Form["Tel"].ToString();
23                     }
24                     AddCustomer(customer);
25                     break;
26             }
27         }
28 
29         public void AddCustomer(Customer customer)
30         {
31             // 简单地返回一个XML字符串。
32             // 告诉客户端：服务端收到了什么样的数据。
33             string ss = XMLSerializer.Serialize(customer, typeof(Customer));
34             Response.Clear();
35             Response.Write(ss);
36             Response.End();
37         }
38 
39     }