JQuery .ajax входит в Успех до завершения вызова страницы

Question

У меня есть следующий код:

<script type="text/javascript">

        $(function(){
        $("#AddMaps").submit(function(){

            var $form = $('#AddMaps');

            $.ajax({
                type: 'POST',
                url: $form.attr( 'action' ),
                data: $form.serialize(),
                dataType: "json",
                beforeSend:function(){
                    // Set up Loading Image and disable submit button
                    $('#ajax-panel').html('<div class="loading"><img src="loader.gif" alt="Loading..." /></div>');
                },
                success:function(data){
                    // Successful Request; do something
                    $('#ajax-panel').empty();
                    if (data.response != "Success"){
                        $('#ajax-panel').append('Error Occurred' + data.response);
                    }
                    else {
                        $('#ajax-panel').append('File(s) Uploaded');
                    }
                },
                error:function(){
                    // Failed Request; Freak out
                    $('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
                }
            });
        });
        });



        </script>

        <form id="AddMaps" action="test_multiple.php">
            <fieldset>
            <label for="server">Select a Server:</label>
            <select name="server" id="server">
        <option value="1">Server 1</option>
        <option value="2">Server 2</option>
        <option value="3">Server 3</option>
            </select>
            </fieldset>
            <input name="submit" type="submit" id="submit" value="Upload">
            <div id="ajax-panel"></div>
        </form>

Проблема, с которой я столкнулся, заключается в том, что вызов ajax входит в функцию успеха задолго до завершения вызова test_multiple.php.test_multiple выполняет большую часть серверной работы, и если я вызываю ее напрямую, загрузка страницы занимает около 15 секунд.Используя это, он сообщает, что он завершается мгновенно, хотя я вижу, что работа в бэкэнде еще не завершена.

Почему это сразу же приводит к успеху?Как мне остановить это?

Кроме того, Firebug сообщает об отмененном POST-запросе test_multiple, а успешный запрос GET - test_multiple.

Answer 1

Это, вероятно, происходит потому, что ваша форма отправляется обычным способом.Вам нужно return false в конце вашего обработчика отправки, чтобы предотвратить перенаправление формы на указанное «действие», что позволяет завершить запрос XHR.

Кроме того, Firebug сообщает об отменеPOST-запрос к test_multiple, но успешный GET-запрос к test_multiple.

В теге формы в вашей разметке не установлено атрибута 'method', поэтому по умолчанию используется GET.Это доказательство того, что ваша форма отправляется в обычном порядке.Прерванный POST, вероятно, вызван тем, что XHR-запрос не получил возможности завершиться до того, как сервер получил обычный HTTP-запрос GET и начал отправлять выходные данные.