由于页面刷新，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的{​​{1}}元素都将表单发布到服务器上。通过阻止使用type="submit"

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

e.preventDefault();

Answer 2

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

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