AJAX 由于页面刷新而没有得到响应

Question

我正在实现一项功能，该功能允许用户上传一个文件，该文件在服务器端进行处理，其中一些信息作为 JsonResult 返回。这适用于我仅发送字符串的另一个 AJAX 请求。似乎是因为正在发送 FormData 导致页面刷新，这对我来说意味着我永远无法到达代码的响应部分。如果有人能把我从这个坑里挖出来，我将不胜感激，谢谢！

MyPage.cshtml

<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile()">Get Results</button>
<script>
function ResultsFromFile() {
        var temp = $("#readFromFile")[0].files;
        if (temp.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < temp.length; x++) {
                    data.append("file" + x, temp[x]);
                }
                $.ajax({
                    type: "POST",
                    url: 'AlexaIndex?handler=GetResultsFromFile',
                    headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (response) {
                        console.log('result is ' + response);
                        var jsonObj = JSON.parse(response);
                        PopulateTable(jsonObj);
                    }
                });
            }
        }
</script>

MyPage.cshtml.cs

public JsonResult OnPostGetResultsFromFile()
{
    foreach (var file in Request.Form.Files)
    {
        var path = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", file.FileName);
        using (var stream = new FileStream(path, FileMode.Create))
        {
            file.CopyTo(stream);
        }
        var urlList = ReadFileOfUrls(path);
        ModelState.Clear();
        var results = _alexaExtractorService.GetAwisResults(urlList);
        var json = JsonConvert.SerializeObject(results);
        return new JsonResult(json);
    }
    return new JsonResult("FINITO MINITO");
}

Answer 1

发生这种情况的原因是因为您的按钮被包装在 form 元素中，并且所有 button 带有 type="submit" 的元素将 post 表单发送到服务器。通过使用 e.preventDefault();

阻止默认操作来阻止提交按钮实际提交

<input id="readFromFile" type="file"/>
<button class="btn btn-primary" type="submit" onclick="ResultsFromFile(event)">Get Results</button>
<script>
function ResultsFromFile(e) {
        e.preventDefault();
        var temp = $("#readFromFile")[0].files;
        if (temp.length > 0) {
            if (window.FormData !== undefined) {
                var data = new FormData();
                for (var x = 0; x < temp.length; x++) {
                    data.append("file" + x, temp[x]);
                }
                $.ajax({
                    type: "POST",
                    url: 'AlexaIndex?handler=GetResultsFromFile',
                    headers: { "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val() },
                    contentType: false,
                    processData: false,
                    data: data,
                    success: function (response) {
                        console.log('result is ' + response);
                        var jsonObj = JSON.parse(response);
                        PopulateTable(jsonObj);
                    }
                });
            }
        }
</script>

Answer 2

将按钮类型更改为 type="button" 而不是 type="submit"。

<button class="btn btn-primary" type="button" onclick="ResultsFromFile()">Get Results</button>

AJAX 由于页面刷新而没有得到响应

AJAX not getting response because of page refresh

c#

ajax

httprequest

asp.net-core-mvc

razor-pages

MyPage.cshtml

MyPage.cshtml.cs