jQuery 中ajax 的 serialize() 方法

最新推荐文章于 2021-04-12 18:55:51 发布

灵泽~

最新推荐文章于 2021-04-12 18:55:51 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jQuery ajax serialize

本文链接：https://blog.youkuaiyun.com/qq_38263083/article/details/83117577

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了HTML表单中各种元素如input、textarea、select和checkbox的数据提交方式，包括它们如何将name和value作为键值对发送，以及在多选和批量操作时的处理方法。

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

示例代码：

<form>
  <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" id="f" />
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g" />
  </div>
</form>

结果：

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

说明：

（1）对于input会将name作为名传送，value作为值传送（可以有多个）

（2）对于textarea 会将name作为名传送，value作为值传送（可以有多个）

（3）对于select ，因为select的值就是选中的option的值，所以就不需要对于select只需要将select的name属性节点赋值即可！

那么传递的就是选择的option的值（可以有多个）

（4）：对于checkbox，如果checked=true,那么传递的就是选择的checkbx的值（可以有多个）

对于以上的都可以有多个相同的name，如果值有多个，那么ajax分装成key=value的形式，并且以 & 连接，后台在接收的时候可以使用数组来接收

使用场景
（1）：select中的option的多个option时（量操作时，将被选中的option的需要的东西发送到后台）举例：	<select> <option value="v1">测试option</option> <option value="v1">测试option</option> <select>
（2）：可以批量提交被ckecked的checkBox中！（批量操作时，将被选中的checkbox的需要的东西，批量发送到后台）举例：	<input type="checkbox" name="测试box" value="测试box" checked> <input type="checkbox" name="测试box" value="测试box" >