Juqery中serialize方法

首先建立一个Ajax接受页面,暂时使用GET方式获取数据,后台代码如下:

namespace WebApp
{
    public partial class Index1Ajax : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {     
            Response.Write(GetRequestParamByGET("UserName"));
            Response.End();
        }
        /// <summary>
        /// 获取GET方式传入的参数
        /// </summary>
        /// <param name="strKey">参数名</param>
        /// <returns></returns>
        private string GetRequestParamByGET(string strKey)
        {
            string strTemp = string.Empty;
            if (Request.QueryString[strKey]!=null)
            {
                strTemp = Request.QueryString[strKey];
            }
            else
            {
                strTemp = "未传入参数:["+strKey+"]";
            }
 
            return strTemp;
 
        }
    }
}

一般情况下我们这样使用AJAX方法,代码如下

注意这句代码:

data: { UserName: $("#txtUserName").val() },

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery序列化元素DEMO1</title>
    <script src="Public/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSave").click(function() {
                $.ajax({
                    type: "GET",
                    url: "Index1Ajax.aspx",
                    data: { UserName: $("#txtUserName").val() },
                    beforeSend: function() {
                        $("#divResult").html("数据加载中请稍候.....");
                    },
                    success: function(data, textStatus) {
                        alert("操作成功返回数据:" + data);
                        $("#divResult").html(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("操作失败返回XMLHttpRequest:" + XMLHttpRequest.readyState);
                        alert("操作失败返回状态:" + textStatus);
                        alert("操作失败返回errorThrown:" + errorThrown);
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        alert("操作完成返回XMLHttpRequest:" + XMLHttpRequest.readyState);
                        alert("操作完成返回状态:" + textStatus);
                    }
                });
            });
        });
    </script>
 
</head>
<body>
    <form id="form1" action="#">
    <p>
        Serialize方法示例:</p>
    <p>
        姓名:
        <input id="txtUserName" type="text" name="UserName" /></p>
    <p>
        <input id="btnSave" type="button" value="提交" /></p>
    <p>
    </p>
    <div id="divResult" style="color: Red;">
    </div>
    </form>
</body>
</html>

这种方式在只有少量表单元素的时候,还可以使用,如果表单元素过多的话,就会重复性动作太多...

所以就有了serialize()方法

着重注意:

data: $("#form1").serialize(),

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery序列化元素DEMO1</title>
 
    <script src="Public/jquery.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnSave").click(function() {
                $.ajax({
                    type: "GET",
                    url: "Index1Ajax.aspx",
                    data: $("#form1").serialize(),
                    beforeSend: function() {
                        $("#divResult").html("数据加载中请稍候.....");
                    },
                    success: function(data, textStatus) {
                        alert("操作成功返回数据:" + data);
                        $("#divResult").html(data);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("操作失败返回XMLHttpRequest:" + XMLHttpRequest.readyState);
                        alert("操作失败返回状态:" + textStatus);
                        alert("操作失败返回errorThrown:" + errorThrown);
                    },
                    complete: function(XMLHttpRequest, textStatus) {
                        alert("操作完成返回XMLHttpRequest:" + XMLHttpRequest.readyState);
                        alert("操作完成返回状态:" + textStatus);
                    }
                });
            });
        });
    </script>
 
</head>
<body>
    <form id="form1" action="#">
    <p>
        Serialize方法示例:</p>
    <p>
        姓名:
        <input id="txtUserName" type="text" name="UserName" /></p>
    <p>
        <input id="btnSave" type="button" value="提交" /></p>
    <p>
    </p>
    <div id="divResult" style="color: Red;">
    </div>
    </form>
</body>
</html>