我的AJAX的div負荷不斷刷新整個頁面

Question

我有一個AJAX形式，我想重裝股利而不是整個頁面。我已經嘗試了很多東西，我有很多紅色的stackoverflow主題。我無法弄清楚我應該做什麼。

這是我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']); 
} 

編輯： 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> 

有人可以幫助我弄清楚我做錯了什麼？

的Fabian＃網絡明星

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）中。通過使用事件對象的方法preventDefault()阻止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; 
    }); 
}); 

這是這樣做的最正式的方式。

ⅱ）。您可以將您的提交按鈕/輸入更改爲簡單按鈕，並使用onClick事件綁定ajax。

像這樣：

$(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)定義爲表單的操作屬性。這會自動阻止表單提交。

ⅳ）。通過從事件處理程序返回false。你目前正在做什麼。令人奇怪的是它不工作作爲jQuery的文件直接說：

，我們可以通過調用事件對象.preventDefault()或從我們的處理程序返回false取消提交操作。

也許下面的帖子可以幫助你： 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語句將默認提交其將從根本上重新加載代碼摺疊。如果你不希望這樣的事情發生，

添加以下

event.preventDefault(); 

這將阻止提交表單，並在功能上執行代碼

Answer 5

我覺得在你的js錯誤這就是爲什麼它沒有按預期執行，你有沒有檢查你是否有任何錯誤？也許這是因爲你沒有終止你的$ .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; 
    }); 
});