如何利用ajax获取FormData对象并提交表单数据
如何利用ajax获取FormData对象并提交表单数据
提问于 2016-07-15 14:22:19
我希望获得一个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变量是空的。
任何帮助都将不胜感激，谢谢。
回答 3
Stack Overflow用户
回答已采纳
发布于 2016-07-15 14:25:00
- 您的
form-sync属性是非标准的，因此您的HTML是无效的。您应该将其设置为data属性。 - 您需要连接到表单的
submit事件，而不是click。 FormData构造函数需要一个DOMElement，而不是当前传递给它的jQuery对象。您可以只提供this引用，因为这就是DOMElement。form没有data-url属性。我假设您需要action属性，因为您还没有显式地提供该属性，因此它将默认为当前页面。- 您的
return处理程序中的success语句是多余的。 - 您需要通过对传递的submit事件调用
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);
},
});
})Stack Overflow用户
发布于 2016-07-15 14:31:58
问题是，您传递的是一个jQuery元素，而不是一个DOM元素。
要使FormData真正返回您期望的内容，您需要将一个DOM元素传递给它的构造函数。
在这里，尝试一下这个：
var formdata = new FormData($(this).closest("form")[0]);另一个问题是表单没有data-url属性。
使用action属性，如果您自己没有给出url，它将返回当前页面的url。
在这里，用这个代替：
var url = this.action; // or $(this).prop('action');Stack Overflow用户
发布于 2018-01-19 20:41:49
< button type="button" class="btn btn-primary"
onclick="saveData()">Save</button>函数()中的JS代码
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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38398516
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号