ajax提交表单时自动取表单数据

最新推荐文章于 2025-06-14 20:28:45 发布

小熊爱芒果

最新推荐文章于 2025-06-14 20:28:45 发布

阅读量592

点赞数

CC 4.0 BY-SA版权

分类专栏：技术随笔文章标签： ajax serialize

本文链接：https://blog.youkuaiyun.com/qq_41526325/article/details/80137022

技术随笔专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery中serialize()方法的使用方式，该方法能够将表单元素集合转化为URL编码的字符串，便于发送到服务器。通过示例展示了如何序列化包含多种类型输入字段的表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(selector).serialize()

详细说明

.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

示例:

<form id="testform">
  <div><input type="text" name="a" value="1" id="a" /></div>
  <div><input type="text" name="b" value="2" id="b" /></div>
  <div><input type="hidden" name="c" value="3" id="c" /></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" checked/>男
    <input type="checkbox" name="f" value="9"/>女
  </div>
  <div>
    <input type="button" name="g" value="提交" id="add" />
  </div>
</form>

使用serialize();

<script>
        $('#add').click(function() {
           var data=$('#testform').serialize();
           console.log($data);
        })
</script>

得到:

a=1&b=2&c=3&d=4&e=5

于是我们可以这样:

<script>
        $('#add').click(function() {
            var data=$('#testform').serialize();
            var url = '';
            $.post(url, data, function (re) {
                //...                 
            });
        })
</script>