由于页面刷新，AJAX 没有得到响应答案

【问题标题】：AJAX not getting response because of page refresh由于页面刷新，AJAX 没有得到响应
【发布时间】：2019-08-31 18:56:14
【问题描述】：

我正在实现一项功能，该功能允许用户上传在服务器端处理的文件，其中一些信息作为 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");
}

【问题讨论】：

这是因为提交按钮实际上将结果提交给服务，这意味着它对定义的资源执行表单标签中定义的操作，您需要抑制默认行为，您可以使用preventDefault() 方法
@MindSwipe 谢谢，我试过这种方法，它也有效！

标签： c# ajax asp.net-core-mvc httprequest razor-pages

【解决方案1】：

发生这种情况的原因是因为您的按钮包含在form 元素中，并且所有带有type="submit" 的button 元素都会将表单发布到服务器。通过使用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>

【讨论】：

我在此处添加了关于您的意图的注释，请随时改进。
谢谢，很有道理。
完美，这就是解决方案！感谢@CoOl 和 MarkSchultheiss

【解决方案2】：

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

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

【讨论】：