gpt4 book ai didi

javascript - 使用 XmlHttpRequest/ajax 发布表单会改变有效负载

转载 作者:行者123 更新时间:2023-12-03 00:08:21 25 4
gpt4 key购买 nike

我想使用 Ajax/XMLHttpRequest 将表单发布ASP NET Core Controller
如果我只是Post表单,它就会在Controller中获取数据,但是当使用XMLHttpRequest时,我的模型的字段> 获取默认值:

我在我的代码中包含了以下两种形式:- 一种形式只是Postsaction属性中指定的url,另一种形式调用方法和带有 XMLHttpRequestPost-s。

HTML+JS

<!DOCTYPE html>
<html>

<head>
<script>
window.submit = function () {
var form = document.getElementById("delegate-form");
var data = new FormData(form);
var xhr = new XMLHttpRequest();

var content=form.getAttribute('Content-Type');
var method=form.getAttribute('method');
var action=form.getAttribute('action');
xhr.open(method,action);
xhr.setRequestHeader('Content-Type',content);
xhr.onload = function () {
if (xhr.status == 200) {
resolve(xhr.response);
}
else if (xhr.status != 200) {
reject("Failed to submit form with status" + xhr.status);
}
}
xhr.send(data);
};


</script>
</head>

<body>
<div id="Form-without-ajax">
<form method="POST" enctype="multipart/form-data" action="http://localhost:8300/api/bulk">
<input type="text" name="Name" value="aa" />
<input type="text" name="ID" value="13"/>
<input type="file">
<br>
<input style="align-content: flex-end" type="submit" />
</form>
</div>
<br>

<div id="Form-with-ajax">
<form method="POST" id="delegate-form" enctype="multipart/form-data" action="http://localhost:8300/api/bulk">
<input type="text" name="Name" value="ab" />
<input type="text" name="ID" value="33"/>
<input type="file">
<br>

</form>
<button onclick="submit()">Submit with delegate</button>
</div>

</body>

</html>

型号

 [Serializable]
public class Data {
public string Name { get; set; }
public int ID { get; set; }
}
}

.NET Controller

    [HttpPost]
[Route("/api/bulk")]
public async Task TestBulkAsync(Data data) {
//data has Name=null and id=0 when using the XMLHttpRequest
}

P.S 我正在使用 multipart/form-data 因为除了该模型之外我还想附加一些文件。而且我需要一个像我的情况一样的处理程序 提交因为我需要在提交表单之前执行额外的逻辑。

最佳答案

xhr.setRequestHeader('Content-Type',content);

通常,如果将 FormData 对象传递给 XMLHttpRequest,它将从 FormData 对象生成 Content-Type header (这将是具有特定边界属性的多部分请求)。

在这里,您将使用您手动确定的内容覆盖内容类型……并且您将省略边界属性。然后服务器不知道边界在哪里,一切都会中断。

不要覆盖内容类型。

关于javascript - 使用 XmlHttpRequest/ajax 发布表单会改变有效负载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54863396/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com