私のajax div loadはページ全体をリフレッシュし続けます

Question

私はajaxフォームを持っており、ページ全体ではなくdivをリロードしたいと思います。私は多くのことを試した、私は赤いスタックオーバーフローのトピックがたくさんある。私は何をすべきか理解できません。

これは私のhandling.jsです：

$(document).ready(function(){ 
    $('#guideForm').submit(function(){ 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

これは私のhandling.phpです：

if ($_POST['guide']) { 
    $settings->addGuide($_POST['guide']); 
} 

EDIT： Formcodes：

<div class="col-md-4"> 
    <h2>test title</h2> 
    <p class="guids">This is a test text.</p> 
    <form method="post" id="guideForm"> 
    <input name="guide" value="1" style="positon:absolute; display:none;"> 
    <button class="btn btn-primary">Got it!</button>  
    </form>   
</div> 

誰かが私を助けることができます私が間違っていることを理解する？

ファビアンの＃のWeb-スター

Answer 1

あなたはすなわち、フォームを送信するには、イベントのデフォルト動作を防ぐために必要な提出からページを停止するにはe.preventDefault()

$('#guideForm').submit(function(e){ 
     e.preventDefault(); // added this line and an argument 'e' to the function 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 

Answer 2

を試してみてください。

リクエスト後にDOMがフォームを送信するため、ページがリロードされ続けます。また、デフォルトの動作として、フォームはアクションパラメータを指定しなかった場合と同じページに自身を送信します。

だから、これを行う方法は複数あります。

i）。イベントオブジェクトのメソッドを使用して、JSイベントの伝播を停止します。このよう

：

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); //stop default behaviour 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

これは、これを行うための最も正式な方法です。

ii）。送信ボタン/入力を単純なボタンに変更し、ajaxをonClickイベントでバインドすることができます。

$(document).ready(function(){ 
$('#fakeSubmitButton').click(function(e){ 
    $.ajax({ 
     type: 'POST', 
     url: '../includes/handling.php', 
     data: $(this).serialize() 
    }) 
    .done(function(data){ 
     $('#guide').load(document.URL + ' #guide'); 
    }) 
    return false; 
}); 
}); 

III）：このよう

。javascript:void(0)をフォームのアクション属性として定義できます。これにより、フォームが自動的に送信されなくなります。

iv）。イベントハンドラからfalseを返します。あなたは現在何をしていますか？私たちは、イベントオブジェクトの.preventDefault()を呼び出すことにより、または当社のハンドラからfalseを返すことにより提出するアクションをキャンセルすることができます

：それ自体が言うjQueryのドキュメントとして機能していない奇妙です。

たぶん、次のポストはあなたを助けることができる： jQuery - Form still submits with return false

をまた上記のポストに陳 - 津林の答えを確認してください。 return falseを使用しない場合のリンクが表示されます。

これが役に立ちます。

Answer 3

e.preventDefault（）を使用します。

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
}); 

Answer 4

$('#guideForm').submit() 

上記jqueryの文は、デフォルトでは、基本的にコードをリロードしまう倍に提出します。あなたはこれが起こることをしたくない場合は、

これは、フォームの提出と、私はあなたのjsにエラーがあると思う機能で

Answer 5

をコードを実行するのを妨げる以下

event.preventDefault(); 

を追加しますそれが期待どおりに実行されない理由です。何かエラーがあるかどうかチェックしましたか？たぶんそれはあなたの$ .ajax関数の終了を持っていないからです。 ";"ターミネーター。

$(document).ready(function(){ 
    $('#guideForm').submit(function(){ 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }); 

     return false; 
    }); 
}); 

Answer 6

使用e.preventDefault（）。サブミットのデフォルト動作を停止します。

$(document).ready(function(){ 
    $('#guideForm').submit(function(e){ 
     e.preventDefault(); //stop default behaviour 
     $.ajax({ 
      type: 'POST', 
      url: '../includes/handling.php', 
      data: $(this).serialize() 
     }) 
     .done(function(data){ 
      $('#guide').load(document.URL + ' #guide'); 
     }) 
     return false; 
    }); 
});