javascript - 提交表单时将 JavaScript 对象添加到表单数据

Question

用户可以选择在表单中执行多个操作，在提交表单时执行操作后，需要向表单添加一个 JavaScript 对象。我尝试了多种方法，在服务器数据中达到 [Object object]

JavaScript 对象

var damageitems = {'5b3b43285d57025915000002':
                  {action: "accept",damage_location_name:"Front Bumper", estimated_total_repair_cost: "993.72", estimated_total_repair_cost_currency:"USD"}
                  }

我尝试过的脚本

$( "form" ).submit(function( event ) {
        event.preventDefault();
        url = $(this).attr( "action" );
        var postData = $(this).serializeArray();
        postData.push({name: 'damage_items', value: damage_items});
        $.post(url, postData, function(){});
    });

服务器中达到的值

{"utf8"=>"✓", "_method"=>"put", "authenticity_token"=>"uztc+G0fyTb8wH7D6HZAslTfxuJvFLP3UunjiRjWylk=", "damage_items"=>"[object Object]", "action"=>"batch_update", "controller"=>"damage_items", "claim_id"=>"5b3b41415d57026665000001"}

我的目标是正常提交​​值而不是ajax，js 变量中的值以带有键 damage_items 的哈希形式到达服务器。不喜欢将其添加到表单控件值然后提交的方式

Answer 1

将脚本更新为以下内容即可解决问题

$( "form" ).submit(function( event ) {
    event.preventDefault();
    url = $(this).attr( "action" );
    var postData = $(this).serializeArray();
    postData.push({name: 'damage_items', value: JSON.stringify(damage_items)});
    $.post(url, postData, function(){});
});

当您尝试将数据存储在表单中时，如果它还不是字符串，则会使用 toString 方法将其转换为字符串。 Object 的 toString 方法返回 [object Object] 这就是你得到它的原因。

将其转换为 JSON 字符串可以防止这种情况发生。