web-dev-qa-db-ja.com

私の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 + 'no track selected' + 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 ) {
          /* You win! */
          alert('ajax was called success');
      }).fail( function( data ) {
          /* You lose, show error */
          alert('ajax was called failure');
    });
    return false;  
});

最後にここに私のプラグインコードがあります：

add_action('wp_ajax_my_track_upload', 'my_track_upload');
function my_track_upload()
{
  die('hello');
}

問題点（今後）：ページが更新されるのはなぜですか。 jQueryの 'submit'イベントでfalseを返します。

************************編集*******************

私は自分のコードを次のように変更しましたが、問題はどこにあるのかはっきりとはわかりませんが、現在は機能します。

... ... ... ...

var theTrack = fileArray[0];
        formData.append('action', 'musistic_track_upload');
        formData.append("music", theTrack);
enter code here

... ... ... ...

$.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("Upload Audio File", function() {
    jQuery(this).prop('disabled', false);
  });
});

return false;
pluginsplugin-developmentjqueryajax
1
Keenan Diggs

AJAXクエリに重要な行がありませんでした。このオプションがないと、呼び出しは失敗し、ページが更新されます。

processData: false,
1
Keenan Diggs

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 + 'no track selected' + 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 ) {
          /* You win! */
          alert('ajax was called success');
      }).fail( function( data ) {
          /* You lose, show error */
          alert('ajax was called failure');
    });
});

ところで：常にpreventDefault()を関数の上に置くようにしてください、それは他の何かがされる前にデフォルトの動作を妨げるべきです。

3
Jeffrey Ponsen