У меня есть следующий код:
<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, но успешное ПОЛУЧАЕТ запрос к test_multiple.
Вероятно, это происходит из-за того, что ваша форма отправляется обычным способом. Вам необходимо вернуть false
в конце обработчика отправки, чтобы форма не перенаправлялась на указанное «действие», что позволяет завершить выполнение запроса XHR.
Кроме того, Firebug сообщает о прерван запрос POST к test_multiple но успешный запрос GET на test_multiple.
Для тега формы в вашей разметке не установлен атрибут «метод», поэтому по умолчанию используется GET. Это свидетельство того, что ваша форма отправляется обычным способом. Прерванный POST, вероятно, вызван тем, что XHR-запрос не успел завершиться до того, как сервер получил нормальный HTTP-запрос GET и начал отправку вывода.