做个查询页，十几个筛选框，要拼成查询串发给后端。新人一个个取val再拼接，写了三十行还漏了复选框。我过去把那坨代码删了，换成一行serialize，瞬间清爽。

serialize是jquery给表单准备的快捷方法，一次把表单里能提交的控件拼成查询字符串，比如name加等号加值，中间用和号连。发GET请求时直接拼在网址后面，发POST时当data传，都很顺手。

它到底拼了哪些控件

只拼有name属性、没被禁用、能提交成功的控件。文本框、下拉框、选中的单选复选都会进，没选中的复选框会被跳过。按钮和file控件不进，这点要注意，传文件得用FormData。

中文会被自动编码，后端按UTF8解就行。要对象而不是字符串，用serializeArray，它返回键值对数组，方便再加工。

用顺手的三个姿势

  • GET查询：网址后面直接拼serialize结果，刷新也能保留条件
  • POST提交：当data传，后端按表单解析，改动最小
  • 再加工：先serializeArray改值，再用param转回字符串
const q = $('#searchForm').serialize(); $.get('/api/list?' + q); const arr = $('#searchForm').serializeArray(); $.post('/api/save', $('#editForm').serialize());

这里searchForm是查询表单的id，editForm是编辑表单的。get那行把条件拼进网址，post那行整表单提交。注意表单选择器要选中form标签，选中div是拼不出来的，这个坑很多人踩过。

有个细节，disabled的控件会被忽略。如果展示时禁用了某项，提交前记得放开，或者用readonly代替，readonly的值是会被拼进去的。

取舍很直接。普通表单提交用serialize最快，文件上传或复杂嵌套换FormData。别为了炫技手拼字符串，又长又容易漏编码。