1.aspx页面代码如下所示:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="Web.User.Add" %> <asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <title>添加用户信息</title> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <div id="content" region="center" title="添加用户" style="padding: 5px;"> <div id="myDiv" class="easyui-panel" style="width: 100%; height: 100%; padding: 30px 60px; margin: 0 auto;"> <form id="ff"> <div style="margin-bottom: 20px"> <input id="uid" class="easyui-textbox" name="用户编号" type="text" style="width: 100%" data-options="label:'用户编号:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="uname" class="easyui-textbox" name="用户名" style="width: 100%" data-options="label:'用户名:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="upassword" class="easyui-textbox" name="密码" style="width: 100%" data-options="label:'密码:',required:true"> </div> <div style="margin-bottom: 20px"> <input id="email" class="easyui-textbox" name="电子邮箱" style="width: 100%" data-options="label:'电子邮箱:',required:true,validType:'email'"> </div> <div style="margin-bottom: 20px"> <input id="phonenumber" class="easyui-textbox" name="电话号码" style="width: 100%" data-options="label:'电话号码:',required:true"> </div> <div style="margin-bottom: 20px"> <select id="jt" class="easyui-combobox" name="集团名称" label="所属集团" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> <div style="margin-bottom: 20px"> <select id="gc" class="easyui-combobox" name="工厂名称" label="所属工厂" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> <div style="margin-bottom: 20px"> <select id="role" class="easyui-combobox" name="角色" label="角色" style="width: 100%"> <option value="-1" selected="selected">请选择</option> </select> </div> </form> <div style="text-align: center; padding: 5px 0"> <a id="submit_button" href="javascript:void(0)" class="easyui-linkbutton" style="width: 80px"> 添加</a> <a id="reset_button" href="javascript:void(0)" class="easyui-linkbutton" style="width: 80px"> 清空</a> </div> </div> <script type="text/javascript"> $("#submit_button").click(function () { //获取表单信息并验证 var uid = $('#uid').val(); var uname = $('#uname').val(); var upassword = $('#upassword').val(); var email = $('#email').val(); var phonenumber = $('#phonenumber').val(); var jt = $('#jt').val(); var gc = $('#gc').val(); var role = $('#role').val(); //提交表单 $.ajax({ url: "/User/UserHandler.ashx", type: "POST", data: $('#ff').serialize(), dataType: "text", success: function (data) { console.log(data); }, error: function() { alert('ajax提交表单发生异常'); } }); }); </script> </div> </asp:Content>
需要注意的是,使用jquery ajax提交表单时,我们没有在form里面直接写action和method属性值,而是放在js代码中,同时,我们使用的是button,而不是使用type="submit"的input标签来提交。ajax提交请求时,需要特别注意data和dataType属性的设置。data表示要提交的表单的内容。
2.后台ashx处理程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; using Model; namespace Web.User { /// <summary> /// UserHandler 的摘要说明 /// </summary> public class UserHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { // 如果表单是以 POST 方式提交的,则服务器端必须以 context.Request.Form[name] 或者 context.Request[name] 来获取; // 表单元素必须要有 name 属性,因为Form[] 中的索引就是 name 属性的值; // 注意: ajax提交请求时,需要设置data属性,后台才能够接收到表单中的数据, // 例如 data: $('#ff').serialize() 代表将form表单中的数据序列化传输。 //string userName = context.Request.Form["txt"]; //string userPwd = context.Request.Form["pwd"]; // 如果表单元素以 GET 方式提交,则服务器端必须以 Request.QueryString[] 来获取,索引仍是name属性的值。 // 以 GET 方式提交的时候,会在浏览器的地址栏显示提交的内容。 //string userName = context.Request.QueryString["txt"]; //string userPwd = context.Request.QueryString["pwd"]; UserInfo user1 = new UserInfo(); user1.Id = context.Request.Form["用户编号"]; user1.Name = context.Request.Form["用户名"]; user1.Password = context.Request.Form["密码"]; user1.Email = context.Request.Form["电子邮箱"]; user1.Phonenumber = context.Request.Form["电话号码"]; context.Response.ContentType = "text/plain"; context.Response.Write(user1.ToString()); } public bool IsReusable { get { return false; } } } }get方式提交和post方式提交,后台接收数据的方式不同。