jQuery表单提交和后台交互

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

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

页面代码：

<!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>

一般处理程序代码：

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;
            }
        }
    }
}

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

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

页面代码：

<!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>

一般处理程序代码：

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;
            }
        }
    }
}

jQuery表单提交和后台交互

猜你喜欢