Question

我想Post使用Ajax/XMLHttpRequest到ASP NET Core Controller的表单。
如果我只是用Post的形式获取Controller中的数据，但是当使用XMLHttpRequest时，我的model的字段将被默认：

我在我的代码中包含以下2种形式： -一种形式，简单地将Posts设置为url属性中指定的action，另一种形式则用{{1来调用method和Post-s }}。

HTML + JS

XMLHttpRequest

模型

<!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>

.NET控制器

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

PS 我之所以使用[HttpPost] [Route("/api/bulk")] public async Task TestBulkAsync(Data data) { //data has Name=null and id=0 when using the XMLHttpRequest }是因为除了该模型之外，我还想附加一些文件。我需要像我的案例multipart/form-data这样的处理程序，因为我需要执行提交表单之前需要其他逻辑。

Answer 1

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

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

在这里，您要用手动确定的内容类型覆盖Content-Type……而您将忽略border属性。然后服务器不知道边界在哪里，一切都中断了。

请勿覆盖内容类型。

使用XmlHttpRequest / ajax发布表单会更改有效负载

1 个答案: