Почему мой AJAX-запрос обновляет страницу?
Я пытаюсь загрузить аудио файл через AJAX-форму.
Вот мой HTML-код в шаблоне редактирования профиля.
<form method="post" id="my_upload_form" action="" enctype="multipart/form-data">
<input type="file" name="file" id="my_file_input" accept="audio/*">
<input type="submit" class="btn-submit btn-sumary" value="upload audio file" name="submit" id="my_audio_submit">
<div id="my_error_report"></div>
</form>
Вот мой jQuery код:
$('#my_upload_form').submit(function () {
var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
var endHtml = '</p></em></strong>';
var formData = new FormData();
var fileArray = jQuery('#my_file_input').prop('files');
if(fileArray.length > 0) {
var theTrack = fileArray[0];
formData.append("music", theTrack);
} else {
jQuery('#my_error_report').html( html + 'файл не выбран' + endHtml );
return false;
}
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
// async: false,
data: {
action : 'my_track_upload',
some_data : formData
},
// dataType: 'text'
}).success( function( data ) {
/* Успех! */
alert('ajax вызов успешен');
}).fail( function( data ) {
/* Неудача, показать ошибку */
alert('ajax вызов неудачен');
});
return false;
});
И наконец, код моего плагина:
add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
die('hello');
}
Проблема (будет дополнено): Почему страница обновляется? Я возвращаю false в jQuery событии 'submit'.
************************РЕДАКТИРОВАНИЕ********************
Я изменил свой код на следующий, и теперь он работает, хотя я не уверен, где конкретно была проблема.
... ... ...
var theTrack = fileArray[0];
formData.append('action', 'musistic_track_upload');
formData.append("music", theTrack);
введите код здесь
... ... ...
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
data: formData,
enctype: 'multipart/form-data',
contentType: false,
processData: false,
datatype: "script",
beforeSend: function() {
jQuery('#my_error_report').html('');
}
}).complete(function( data ) {
jQuery('#my_error_report').html( html + data.responseText + endHtml );
jQuery('#my_audio_submit').val("Загрузить аудио файл", function() {
jQuery(this).prop('disabled', false);
});
});
return false;

Попробуйте использовать preventDefault()
— это функция jQuery, которая предотвращает стандартные действия, вызываемые браузером.
Сначала вам нужно вызвать обработчик события, активировав отправку формы. Это можно сделать следующим образом:
$('#my_upload_form').submit(function (event) {
После перехвата события отправки формы и передачи объекта события вам следует предотвратить стандартное поведение браузера (перезагрузку страницы):
event.preventDefault();
Теперь ваш код будет выглядеть так:
$('#my_upload_form').submit(function (event) {
event.preventDefault();
var css = 'font:Helvetica; color:red; font-size:1.5em; padding:inherit;';
var html = '<strong><em> ' + '<p style="' + css + '">' + '*';
var endHtml = '</p></em></strong>';
var formData = new FormData();
var fileArray = jQuery('#my_file_input').prop('files');
if(fileArray.length > 0) {
var theTrack = fileArray[0];
formData.append("music", theTrack);
} else {
jQuery('#my_error_report').html( html + 'файл не выбран' + endHtml );
return false;
}
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'POST',
// async: false,
data: {
action : 'my_track_upload',
some_data : formData
},
// dataType: 'text'
}).success( function( data ) {
/* Успех! */
alert('AJAX-запрос выполнен успешно');
}).fail( function( data ) {
/* Ошибка, показать сообщение */
alert('Ошибка при выполнении AJAX-запроса');
});
});
Кстати: Всегда старайтесь размещать preventDefault()
в начале функции — это предотвратит стандартное действие до выполнения любых других операций.

Хорошее предложение. Я просто возился с AJAX-запросом, пока он не заработал. К моему стыду, я до сих пор не до конца понимаю почему.
Для тех, кто хочет глубже разобраться в preventDefault и 'return false', вот хорошая ветка обсуждения: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false

Я перепробовал всё остальное, но это сработало сразу. У меня была форма с action и Ajax-запрос, который слушал событие 'click'. Это было стороннее ПО, и когда я попытался изменить на 'submit', ничего не отправлялось. Установка processData: false волшебным образом решила все проблемы.
