Javascript 如何使用asp.NETMVC通过ajax获取FormData对象并提交表单数据

我想获得一个

表单

对象，并通过在Asp.net MVC中单击按钮将数据提交到服务器

这是我的HTML代码：

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

这是我的MVC代码：

var data = Request["InvtId"];

问题是

数据

变量为空

非常感谢您的帮助。

• 您的

  表单同步

  属性是非标准的，因此您的HTML无效。您应该将其设置为

  数据

  属性
• 您需要连接到表单的

  submit

  事件，而不是

  单击
  
  FormData
  构造函数需要一个domeElement，而不是当前传递给它的jQuery对象。您只需给出
  此
  引用，因为它是domeElement
  表单
  没有
  数据url
  属性。我假设您需要
  操作
  属性，该属性将默认为当前页面，因为您没有明确提供
  success
  处理程序中的
  return
  语句是多余的
  您需要通过对传递的提交事件调用
  preventDefault（）
  来停止标准表单提交（因为您是通过AJAX提交的）
  

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

@Html.Hidden（“InvtId”，item.InvtId）

$（document）.on（'submit'，'data form sync=“ajax”]'，函数（e）{
e、 预防默认值（）；
$.ajax({
url:this.action，
键入：“post”，
数据：新表单数据（本），
processData:false，
contentType:false，
成功：功能（结果）{
警报（结果消息）；
},
});
})

问题是您正在传入一个jQuery元素和NOT一个DOM元素。
为了让

FormData

实际返回您期望的内容，您需要将DOM元素传递给它的构造函数

在这里，请尝试以下方法：

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

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

另一个问题是表单没有

数据url

属性。
改为使用action属性，如果您自己没有提供url，它将返回当前页面的url

在这里，请使用此选项：

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

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

HTML

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

使用序列化数组获取值

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);

 }

---

罗里，谢谢你的回答，但我有一个问题。当您说：

您*需要*挂接表单的提交事件，而不是单击。

您是说有必要这样做还是最好这样做？@Mango-requirement，否则您将在表单中单击以填写数据时提交表单。没问题，很乐意提供帮助。我还添加了一个关于使用

preventDefault（）

的注释，这里也需要它。当您在

$.ajax（）

参数（对象）中使用

this

时，那么

this

不是指

$.ajax（）

参数吗？这难道不是OP拥有

url

和

formdata

变量的原因吗？@Mango只有在您为

成功

/

错误

/

最终

提供的匿名函数范围内使用。在对象中，范围与

submit

处理程序相同，因此

此

引用

表单

。