asp.net Jquery表单html和后台交互

Html页面1

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯Jquery表单和后台交互</title>
    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    type: "post",
                    url: "Handler01.ashx",
                    data: "txtUserName=" + $.trim($("#txtUserName")[0].value) + "&txtUserPwd=" + $.trim($("#txtUserPwd")[0].value),
                    success: function (result) {
                        $("#msg").html(result);
                    }
                });

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="frmUserInfo" action="#">
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text" id="txtUserName" />
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" id="txtUserPwd" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="btnSubmit" value="提交" />
            </td>
        </tr>
    </table>
    </form>
    <div id="msg"></div>
</body>
</html>

 

Handler01 
using System.Web;

namespace Test
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    public class Handler01 : IHttpHandler
    {
        /// <summary>
        /// 请求处理
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 方式1
            string userName = context.Request.Params["txtUserName"].ToString();
            string userPwd = context.Request.Params["txtUserPwd"].ToString();

            context.Response.Write(string.Format("姓名：{0}，密码：{1}",userName, userPwd));
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Html页面2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯Jquery表单和后台交互</title>
    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    type: "post",
                    url: "Handler02.ashx",
                    data: $("#frmUserInfo").serialize(),
                    success: function (result) {
                        $("#msg").html(result);
                    }
                });

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="frmUserInfo" action="#">
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text" id="txtUserName" name="txtUserName" />
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" id="txtUserPwd" name="txtUserPwd" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="btnSubmit" value="提交" />
            </td>
        </tr>
    </table>
    </form>
    <div id="msg"></div>
</body>
</html>

Handler02 
 using System.Web;

namespace Test
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    public class Handler02 : IHttpHandler
    {
        /// <summary>
        /// 请求处理
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 方式2（对应表单序列化）
            string userName = context.Request.Form["txtUserName"].ToString();
            string userPwd = context.Request.Form["txtUserPwd"].ToString();

            context.Response.Write(string.Format("姓名：{0}，密码：{1}", userName, userPwd));
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 



 posted on 2016-05-04 15:27  纳米程序员  阅读(1419)  评论(0)  编辑  收藏  举报