Question

我正在使用jquery $.ajax();函数发布表单数据，获取我正在使用new FormData的表单数据，因为在我的表单中也有一个输入文件。

问题是我的表单中也禁用了字段，通常没有发布，但是如果我使用新的FormData它们就是。

如何解决这个问题？我不需要发布禁用的输入字段！

Answer 1

如何仅使用您想要的字段构建FormData：

// New FormData, get form and inputs
var payload = new FormData(),
    $form = $("form")
    $inputs = $("input", $form);

// For each input
for (var i = 0, l = $inputs.length; i < l; i++) {
    // Cache jQuery selector for input and get disabled attr
    var $input = $(inputs[i]),
        disabled_attr = $input.attr("disabled");

    // If the disabled attr is undefined or false
    // see http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element
    if (disabled_attr === "undefined" || disabled_attr === false) {

        // Append the key value pair to the FormData
        payload.append($input.attr("name"), $input.attr("value"));
    }
}

您现在应该可以使用data上的$.ajax提交FormData。如果失败，您可以使用vanilla JavaScript提交它：

var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.send(payload);

Answer 2

我对新FormData不太了解，但这是另一种解决方案。如果表单不包含太多字段，请使用$ .ajax（）调用的数据属性，并将所需字段及其值仅发送到服务器。示例语法如下所示

$.ajax({
type: "POST" OR "GET",
url: "/someUrl",
data: 
{
  'id' : $('#empId').val(),
  'name' : $('$empName').val()
} ,
dataType: "json",
success: function(result){
    alert(result);
}});

Answer 3

问题是我的表单中也禁用了字段，通常没有发布，但是如果我使用new FormData则是。

根据XHR和HTML5，它们确实不能被序列化。您应该针对那些浏览器提交错误。

如何解决这个问题？我不需要发布禁用的输入字段！

我只是不需要它们，等待修复。如果您要求省略它们，可以尝试以下解决方法：

var $form = /* whatever you have */;
var $inputs = $form.find(":disabled").each(function() {
    $(this).data("xhr-name", this.name);
    this.name = ""; // fields with empty names must be ignored as well
});
var formdata = new FormData($form[0]);
$inputs.each(function() {
    this.name = $(this).data("xhr-name");
});

如果这两者都不起作用，你可以a）完全从DOM中分离输入并在以后恢复它们，或者b）手动构建FormData。

为什么FormData帖子禁用了html字段？

3 个答案: