AJAX не получает ответ из-за обновления страницы - PullRequest
Новая
       14

AJAX не получает ответ из-за обновления страницы

0 голосов
/ 10 апреля 2019

Я реализую функцию, которая позволяет пользователю загружать файл, который обрабатывается на стороне сервера, с некоторой информацией, возвращаемой в виде 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");
}

Ответы [ 2 ]

3 голосов
/ 10 апреля 2019

Причина, по которой это происходит, заключается в том, что ваша кнопка заключена в элемент form, и все элементы button с type="submit" отправят форму на сервер. Запретите кнопку отправки фактически отправлять, предотвращая это действие по умолчанию с 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>
2 голосов
/ 10 апреля 2019

Измените тип кнопки на type="button" вместо type="submit". 

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