Почему мой AJAX-запрос обновляет страницу?

25 янв. 2016 г., 21:21:11
Просмотры: 37.8K
Голосов: 2

Я пытаюсь загрузить аудио файл через 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;
8
Комментарии

Вы проверяли консоль JavaScript console.log с помощью инструментов разработчика на наличие ошибок в JavaScript? Пробовали ли вы возвращать false в начале обработчика отправки формы, чтобы локализовать проблему?

Howdy_McGee Howdy_McGee
25 янв. 2016 г. 21:24:31

Ошибка: Uncaught TypeError: Illegal invocation Может ли быть, что AJAX-запрос ожидает строку в параметре some_data? Я видел много примеров, использующих тот же метод, что и у меня выше.

Keenan Diggs Keenan Diggs
25 янв. 2016 г. 21:28:39

Убедитесь, что $ установлен в jQuery. По умолчанию это не так.

jgraup jgraup
25 янв. 2016 г. 21:30:51

Спасибо за ваш комментарий, jgraup. Я открываю свой js-файл с 'jQuery(document).ready(function($) {', так что не думаю, что ошибка в этом. У меня также есть другая функция, которая отключает кнопку отправки при нажатии.

Keenan Diggs Keenan Diggs
25 янв. 2016 г. 21:32:23

Ах да, я недавно столкнулся с такой же проблемой. Это не имеет отношения к WordPress (так что это оффтопик здесь), но проблема в том, что вам нужно добавить ваше действие к объекту formData(), чтобы в data передавалось только это: data: formData. Без скобок, без идентификатора имени - именно так. Вы можете добавить свое действие так же, как вы добавляете music. Надеюсь, это сработает для вас!

Howdy_McGee Howdy_McGee
25 янв. 2016 г. 21:35:28

Да, я попробовал способ McGee и дополнительно добавил processData: false в мои параметры, прежде чем это сработало.

Keenan Diggs Keenan Diggs
25 янв. 2016 г. 22:11:32

Однако, ajax-ответ теперь возвращает 0.

Keenan Diggs Keenan Diggs
25 янв. 2016 г. 22:14:19

Это проблема с хуком. Попробуйте добавить nopriv и, возможно, вывести в лог ошибок перед завершением.

Howdy_McGee Howdy_McGee
26 янв. 2016 г. 03:30:32
Показать остальные 3 комментариев
Все ответы на вопрос 2
1

Попробуйте использовать 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() в начале функции — это предотвратит стандартное действие до выполнения любых других операций.

27 янв. 2016 г. 09:53:53
Комментарии

Хорошее предложение. Я просто возился с AJAX-запросом, пока он не заработал. К моему стыду, я до сих пор не до конца понимаю почему.

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

Keenan Diggs Keenan Diggs
28 янв. 2016 г. 01:14:56
1

Мне не хватало важной строки в моём AJAX-запросе. Без этой опции вызов завершается неудачей, и страница перезагружается.

processData: false,
28 янв. 2016 г. 01:44:34
Комментарии

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

Mo Alsaedi Mo Alsaedi
24 окт. 2018 г. 21:39:31