jquery ajax提交form参数_new

使用jQuery serialize()方法简化AJAX表单提交

最新推荐文章于 2021-03-16 19:58:53 发布

原创最新推荐文章于 2021-03-16 19:58:53 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

WEB开发专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用jQuery中的serialize()方法序列化表单值，创建URL编码文本字符串，以便在生成AJAX请求时用于URL查询字符串。此方法特别适用于表单参数较多的情况，可以减少代码量，提高代码可读性和维护性。

今天在研究jquery用ajax提交form表单中得数据时，学习到了一种新的提交方式
[size=large][b]jquery中的serialize() 方法[/b][/size]
该方法通过序列化表单值，创建 URL 编码文本字符串
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中
这样当表单中要提交的参数比较多时，就可以使用该方法进行提交，否则将在ajax中得代码会很长，有可能在编写时出错，也不方便检查
以下是自己写的测试代码


<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript">
$().ready(function() {
    $("#submit").click(function() {
        $.ajax({
             url : "insertUser",
             data : $("form").serialize(),
             type : "POST",
             dataType : "text",
             complete : function() {location.href = "main.html"}
        });
    }
}
</script>


<body>
<form name="insertUser" method="post" action="main">
用户名：<input type="text" name="userId" id="userId" /> 
密码：<input type="password" name="staticPassword" id="staticPassword" />
<input type="button" id="submit" value="提交" />
</form>
</body>