jQuery序列化表单后调用append/push报TypeError错误，如何解决？

错误原因 #

$('form').serialize() 方法返回的是URL编码的字符串（格式类似 text=输入值&textw=输入值），并不是数组、对象或jQuery集合，因此不存在 append()、push() 这类方法，调用时自然会抛出类型错误。

解决方案 #

方法1：直接拼接字符串（最简单） #

利用URL参数的拼接规则，直接用 & 连接新参数：

$('form').on('submit', function(e) {
    e.preventDefault();
    let formata = $('form').serialize();
    // 拼接新参数，参数值含特殊字符时建议用encodeURIComponent编码
    formata += '&id=' + encodeURIComponent('1300');
    console.log(formata)
})

方法2：用serializeArray()转数组后扩展 #

serializeArray() 会将表单数据转为包含 name 和 value 的对象数组，可通过 push() 添加新参数，再用 $.param() 转回URL编码字符串：

$('form').on('submit', function(e) {
    e.preventDefault();
    let formDataArr = $('form').serializeArray();
    // 添加新参数到数组
    formDataArr.push({ name: 'id', value: '1300' });
    // 转换为URL编码字符串
    let formata = $.param(formDataArr);
    console.log(formata)
})

方法3：使用FormData对象（适合复杂场景） #

现代浏览器支持 FormData 对象，原生支持 append() 方法，还能处理文件上传等场景：

$('form').on('submit', function(e) {
    e.preventDefault();
    // 基于当前表单创建FormData
    let formData = new FormData(this);
    // 添加新参数
    formData.append('id', '1300');
    // 如需转为字符串查看，可借助URLSearchParams
    console.log(new URLSearchParams(formData).toString());
    // FormData可直接用于jQuery ajax提交，无需转字符串
    // $.ajax({ url: 'xxx', method: 'POST', data: formData, processData: false, contentType: false })
})

内容的提问来源于stack exchange，提问作者Emirano