序列化表单数据并将它们添加到 jquery $.post答案

【问题标题】：serialize form data and add them to jquery $.post序列化表单数据并将它们添加到 jquery $.post
【发布时间】：2018-06-18 07:13:40
【问题描述】：

$('#btnsave').click(function() {
    var id = $('.nameact').attr('data-id');
    var img = $('#imguser').attr('src');
    var uname = $('#inpuname').val();
    var pass = $('#inpass').val();
    var canpublic = $('#selcanpublic').val();
    var about = $('#txtabout').val();
    $.post('btn-save.php', {id, img, uname, pass, canpublic, about}, function(data) {
        console.log(data);
    });
});

它工作正常但是因为inpuname, inpass, selcanpublic, txtabout 都是表单的元素 (forma) 我想知道是否可以序列化该数据并将它们添加到$.post 数据中？

类似这样的：

$('#btnsave').click(function() {
    var id = $('.nameact').attr('data-id');
    var img = $('#imguser').attr('src');
    $.post('btn-save.php', {id, img, $('#forma').serialize()}, function(data) {
        console.log(data);
    });
});

【问题讨论】：

您的第二个示例根本无效。 serialize() 产生一个查询字符串。虽然可以将它附加到您通过 jQuery 发送的对象上，但它需要对您的服务器端代码进行大量修改，而这并不是您真正想要做的。我猜你需要更像this 的东西，它将其他参数附加到序列化字符串中。

标签： javascript jquery

【解决方案1】：

$('form').serialize() 生成一个带有值的查询字符串。因此，当您序列化表单时，它会将值作为 url 参数发送。

它会生成为

http://example.com?id=value&img=value&uname=value&pass=value&canpublic=value&about=value

所以有一种方法可以发送

var formData = $('#forma').serialize()+'&id='+idvalue +'&img='+imgValue;

 $.post('btn-save.php', formData, function(data) {
        console.log(data);
    });

或者您可以serializeArray() 来形成。它将创建key-value 一对表单元素。

var formData = $('#myForm').serializeArray();
formData.push({name: 'id', value: idValue});
formData.push({name: 'img', value: imgValue});

【讨论】：

【解决方案2】：

您可以使用FormData() 对象。它存储表单值。

EDIT您只能使用FormData() 选项processData: false,

$('#btnsave').click(function () {
    var formData = new FormData($('#forma'));
    $.ajax({
        url: 'btn-save.php',
        data: formData,
        type: "POST",
        processData: false,
        success: function(data) {
            console.log(data);
        }
    });
});

【讨论】：

IE9 或更低版本不支持 FormData 对象。我假设这不是 OP 关心的问题。
出了点问题 - 我收到 Unexpected token 错误
试过 - $.post('btn-save.php', {id, img, formData}, function(data) {... - 得到 - Uncaught TypeError: Illegal invocation - 在这条线上
@puerto，是的，我的错。编辑答案。
@KrzysztofJaniszewski，在那种情况下，没有code lines reducing 效果——真可惜