如何将 Json 返回从控制器发送到 Asp.NET Core MVC 应用程序的前端？答案

【问题标题】：How can a Json return be sent from a controller to the frontend in Asp.NET Core MVC application?如何将 Json 返回从控制器发送到 Asp.NET Core MVC 应用程序的前端？
【发布时间】：2020-05-02 11:37:15
【问题描述】：

所以，我有一个向服务器发送请求的 JS 脚本，它运行良好。但是，我希望前端接收包含一些信息的响应并在前端读取它并执行一个函数。

    uploadButton.addEventListener("click", () => {
        var formData = new FormData();
        var request = new XMLHttpRequest();
        request.open("POST", "/Page/Upload");
        request.send(formData);

        if (request.response.result == "Success") {
            console.log("Result is success")
            window.location = request.response.url;
        }
}

我的控制器看起来像这样。

[HttpPost("/page/upload")]
public IActionResult Upload()
        {
            *working parts pertaining to reading the request are omitted*

            var redirectUrl = Request.Host + "/" + page.PageURL;
            return Json(new { result = "Success", url = redirectUrl});
        }

我想要的是让我的 JS 脚本访问返回的 Json 及其内容。我该怎么做？

【问题讨论】：

也许Model 和View 可能是最好的方法
request.open("POST", "/Page/Upload", false)，您需要添加第三个参数以使其同步，否则使用 onreadystatechange 属性。

标签： javascript asp.net asp.net-mvc asp.net-core

【解决方案1】：

尝试使用以下代码。它将订阅readystatechange 事件并在收到 API 响应时运行

uploadButton.addEventListener("click", () => {

        var formData = new FormData();
        var request = new XMLHttpRequest();
        request.open("POST", "/Page/Upload");
        request.send(formData);

        request.addEventListener("readystatechange", function () {

            if (this.readyState === 4) {

                var responseData = JSON.parse(this.responseText);

                if (responseData.result == "Success") {
                    console.log("Result is success")
                    window.location = responseData.url;
                }             
            }
        });
    });

【讨论】：