AjaxフォームSubmitはURLにクエリ文字列を追加してページを再読み込みします

Question

ボタンクリック時にフォームを送信するajaxスクリプトを持っていますが、どの標準でも安全でないものを送信している間はスクリプトはフォームデータをURLに追加します。現在デバッグ中のもの以外の他のフォームにも適しています。ちょうど厄介な長いURLでページをリロードします。

編集：追加フォームメソッド=フォームに「投稿」してもまだ動作しません。

かかわらず、URLの問題を解決するため、これは私のAjaxのスクリプトです：

$("form#PostItemz").click(function(){ 

      var formData = new FormData(this); 

      $.ajax({ 
       url: 'inc/modules/post_data.php', 
       type: 'POST', 
       data: formData, 
       async: false, 
       success: function (data) { 
        alert(data); 
       }, 
       cache: false, 
       contentType: false, 
       processData: false 
      }); 

      return false; 
     }); 

と、これは私のHTMLフォームです：

   <form method="post" id="PostItemz" class="post publisher-box" > 

     <div class="panel panel-white post panel-shadow"> 
      <div id="post-textarea"> 
         <img class="post-avatar" src="profile/maxwell/images (1).jpg"> 
         <i class="fa fa-spinner fa-spin" id="loading_indicator"></i> 
      <textarea onkeyup="textAreaAdjust(this, 70)" onclick="Wo_ShowPosInfo();" name="postText" class="form-control postText" cols="10" rows="3" placeholder="What&#039;s new ? @groups " dir="auto"></textarea> 
      </div> 

    <div id="post-status"> 

     </div> 

       <div class="publisher-hidden-option" id="video-form"> 
      <div class="inner-addon left-addon"> 
       <i class="glyphicon fa fa-video-camera"></i> 
       <input name="videocount" id="video_value" type="text" class="form-control" readonly> 
      </div> 
      </div> 
        <!-- ###music widget --> 
        <div class="publisher-hidden-option" id="music-form"> 
      <div class="inner-addon left-addon"> 
       <i class="glyphicon fa fa-music"></i> 
       <input name="musiccount" type="text" class="form-control" id="audio_value" readonly> 
      </div> 
      <div class="create-album pull-right" onclick="Wo_OpenAlbum();"> 
       <div class="create-text"> 
       Add to album  <input name="OkAlbum" value="AddToAlbum" type="checkbox" />  </div> 
      </div> 
       <div class="clear"></div> 
      </div> 
      <div class="publisher-hidden-option" id="photo-form" > 
      <div class="inner-addon left-addon"> 
       <i class="glyphicon fa fa-file-image-o"></i> 
       <input name="phtoscount" id="photo_value" type="text" class="form-control" readonly> 
      </div> 
      <div class="create-album pull-right" onclick="Wo_OpenAlbum();"> 
       <div class="create-text"> 
       Add to album  <input name="OkAlbum" value="AddToAlbum" type="checkbox" />  </div> 
      </div> 
      <div class="clear"></div> 
      </div> 
      <div class="publisher-hidden-option" id="file-form"> 
      <div class="inner-addon left-addon"> 
       <i class="glyphicon fa fa-file-text-o"></i> 
       <input name="filename" id = "file_value" type="text" class="form-control" readonly> 
      </div> 
      </div> 
      <div id="results"></div> 
      <div class="publisher-hidden-option"> 
      <div id="progress"> 
       <span id="percent">0%</span> 
       <div class="progress"> 
       <div id="bar" class="progress-bar progress-bar-striped active"></div> 
       </div> 
       <div class="clear"></div> 
      </div> 
      </div> 
      <div class="publisher-box-footer"> 
      <div class="row col-lg-2 pull-right"> 
       <button class="form-control btn btn-main"> 
       <i class="fa fa-edit progress-icon "></i> <span id="postbutton">Post</span></button> 
      </div> 
      <div class="row pull-left"> 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <span class="btn btn-default btn-file"> 
         <i class="fa fa-camera" ></i><input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg, image/pjpeg" name="postPhotos[]" multiple> 
         </span> 
        </div> 
       </div> 
      </div> 

         <div class="row pull-left"> 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <span class="btn btn-default btn-file"> 
         <i class="fa fa-video-camera"></i><input type="file" onchange="xVideo();" id="publisher-video" name="postVideo" accept="video/*"> 
         </span> 
        </div> 
       </div> 
      </div> 
      <div class="row pull-left emo-form" > 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <span class="btn btn-default btn-file"> 
         <i class="fa fa-smile-o "></i> 
         </span> 
        </div> 
       </div> 
      </div> 
       <div class="row pull-left"> 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <div class="dropdown"> 
     <button class="btn btn-default btn-file dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button> 
     <ul class="dropdown-menu"> 
     <li> 
        <div class="row pull-left"> 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <span class="btn btn-default btn-file"> 
         <i class="fa fa-file-text-o"></i><input type="file" onchange="xFile();" id="publisher-file" name="postFile"> 
         </span> 
        </div> 
       </div> 
      </div> 

         <div class="row pull-left"> 
       <div class="poster-left-buttons"> 
        <div class="input-group"> 
         <span class="btn btn-default btn-file"> 
         <i class="fa fa-music"></i><input type="file" onchange="xAudio();" id="publisher-music" name="postMusic" accept="audio/*"> 
         </span> 

        </div> 
       </div> 
      </div> 
       </li> 
     </ul> 
    </div> 
        </div> 
       </div> 
      </div> 


      <div class="input-group"> 
       <div class="pull-right charsLeft-post"><span id="charsLeft"></span></div> 
      </div> 
      <div id="status"></div> 
         <div class="row pull-right"> 
       <div class="poster-left-buttons"> 
        <div class="publisher-hidden-option inputsm"> 
         <select name="postPrivacy" class="form-control inputsm"> 
               <option value="3" selected>My Groups</option> 
          <option value="0" >Everyone</option> 
                <option value="1" disabled>Private</option> 
                    </select> 
        </div> 
       </div> 
      </div> 
         <div class="clear"></div> 
      </div> 
     </div> 
      <input type="hidden" name="hash_id" value="c1183f16ab610230ebe8a9bcb331d2d6f7ebbf66"> 
     <input type="hidden" name="postRecord" value="" id="postRecord"> 
    </form> 

すべてのものをINC /モジュール/ post_data.phpでスクリプトがすることにありますエコー "こんにちは世界";何も動作していないようです。

Answer 1

event.preventDefault()行を追加することを忘れないでください。ブラウザがデフォルト動作を実行しないようにしてください。これは、送信時にページを再読み込みすることです。

これは、少なくともリロードの問題を解決する必要があり

$("#PostItemz").on('submit', function(event){ 
event.preventDefault() 
var formData = new FormData(this); 

    $.ajax({ 
     url: 'inc/modules/post_data.php', 
     type: 'POST', 
     data: formData, 
     success: function (data) { 
      alert(data); 
     }, 
     cache: false, 
     contentType: false, 
     processData: false 
    }); 

}); 

のようなものを試してみてください。また、フォームをターゲティングする場合は、イベント：$("#form_id").on('submit', function() {//do stuff})を送信してください。ボタン自体をターゲットにする場合は、$("#button_id").on('click', function() {//do stuff})を実行できますが、フォームの場合は最初の解決策をお勧めします。

EDIT：あなたが頭の中であなたのコードを配置する場合は、ページの前に残りの部分をロードするには、このように（スクリプトの処理時には）存在しないIDにバインドしようとします。これを回避するには、いずれかのはず：

• 体の終わりに場所コードを、</body>タグ

• があなたを包むために（ $(document).on('ready', function() {//do stuff})のために短縮）$(function() {//stuff})を使用する直前に、 jqueryのコードは、基本的にブラウザを語っ：

後でTR「このスクリプトを実行する前にロードするために、フルページ を待ちます」 anslatesあなたのケースでは、次のコードのように：

$(function() { 
$("#PostItemz").on('submit', function(event){ 
    event.preventDefault() 
    var formData = new FormData(this); 

     $.ajax({ 
      url: 'inc/modules/post_data.php', 
      type: 'POST', 
      data: formData, 
      success: function (data) { 
       alert(data); 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 

    }); 

}); 

Answer 2

フォームをクリックしないでください、あなたはそれが

$("#PostItemz").on('submit', function(){ 

    var formData = new FormData(this); 

    $.ajax({ 
     url  : 'inc/modules/post_data.php', 
     type : 'POST', 
     data : formData, 
     success : function (data) { 
      console.log(data); 
     }, 
     contentType: false, 
     processData: false 
    }); 

    return false; 
});