如何获取FormData对象并通过ajax使用asp.net mvc提交表单数据答案

【问题标题】：How to get FormData object and submit the form data by ajax use asp.net mvc如何获取FormData对象并通过ajax使用asp.net mvc提交表单数据
【发布时间】：2018-01-20 04:50:16
【问题描述】：

我想获得一个form 对象并通过在 Asp.net MVC 中单击按钮将数据提交到服务器。

这是我的 HTML 代码：

<form method="post" form-sync="ajax">
  @Html.Hidden("InvtId", item.InvtId)
</form>

这是我的 JS 代码：

$(document).on("click", "[form-sync='ajax']", function() {
  var formdata = new FormData($(this).closest("form")),
    url = $(this).data("url");
  $.ajax({
    url: url,
    type: "POST",
    data: formdata,
    processData: false,
    contentType: false,
    success: function(response) {
      alert(response.message);
      return false;
    },
  });
});

这是我的 MVC 代码：

var data = Request["InvtId"];

问题是data 变量为空

任何帮助将不胜感激，谢谢。

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

您的form-sync 属性是非标准的，因此您的HTML 无效。您应该将其设为 data 属性。
您需要挂钩到表单的submit 事件，而不是click。
FormData 构造函数需要一个 DOMElement，而不是当前传递给它的 jQuery 对象。您可以只提供 this 引用，因为它是 DOMElement。
form 没有data-url 属性。我假设您需要 action 属性，因为您没有明确提供该属性，它将默认为当前页面。
success 处理程序中的 return 语句是多余的。
您需要通过在传递的提交事件上调用 preventDefault() 来停止标准表单提交（因为您是通过 AJAX 提交）。

这是一个包含上述所有修复的完整示例：

<form method="post" data-form-sync="ajax">
    @Html.Hidden("InvtId", item.InvtId)
</form>

$(document).on('submit', '[data-form-sync="ajax"]', function(e) {
    e.preventDefault();
    $.ajax({
        url: this.action,
        type: 'post',
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (result) {
            alert(result.message);
        },
    });
})

【讨论】：

Rory，感谢您的出色回答，但我有一个问题。当你说：You *need* to hook to the submit event of the form, not click. 你是说这样做是必要还是最好这样做？
@Mango 是必须的，否则您将在表单中点击填写数据时提交表单
没问题，很高兴为您提供帮助。我还添加了一条关于使用preventDefault() 的注释，这也是此处所必需的。
Rory 您的回答可能有误。当您在$.ajax() 参数（对象）中使用this 时，this 不是指$.ajax() 参数吗？这不是 OP 有 url 和 formdata 变量的原因吗？
@Mango 仅当您在提供给success/error/finally 的匿名函数范围内使用它时。在对象内，作用域与submit 处理程序相同，因此this 指的是form。

【解决方案2】：

问题在于您传入的是 jQuery 元素而 NOT 是 DOM 元素。
要让 FormData 真正返回您所期望的，您需要将 DOM 元素传递给它的构造函数。

在这里，试试这个：

var formdata = new FormData($(this).closest("form")[0]);

另一个问题是表单没有data-url 属性。
改用action属性，如果你自己没有给出url，它会返回当前页面的url。

这里，改用这个：

var url = this.action; // or $(this).prop('action');

【讨论】：

【解决方案3】：

HTML

< button type="button" class="btn btn-primary" 
onclick="saveData()">Save</button>

JS 代码 函数 saveData() 内部

var formData = new FormData();

使用 serializeArray 获取值

var formulario = $("#miFormulario").serializeArray();

如果有额外的数据或文件

formulario.push({ "name": fileName, "value": file });

向formData添加信息

formulario.forEach((d) => {
    formData.append(d.name, d.value); });

ajax 请求

 $.ajax({        
        timeout: 0,        
     url: "/InfoController/savingInfo",        
     method: "post",        
     data: formData,    
     contentType: false,   
     processData: false,   
     success: function (result) {  //do something  }   
});

控制器

 [HttpPost] public JsonResult savingInfo() {     
 if (Request.Files.Count > 0)
     { ... }    
     var data = Request.Form;      
     var valor1 = data["dato1"];
     return Json(true);

 }

【讨论】：