我的Ajax不斷刷新整個頁面而不是div

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

編輯：表單代碼：

<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>

有人可以幫我弄清楚我在做什么錯嗎？

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提交表單之后。 而且，作為默認行為，您的表單會在未指定操作參數的情況下在同一頁面上提交。

因此，有多種方法可以做到這一點。

一世）。 通過使用事件對象的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;   
    }); 
});

這是最官方的方式。

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)定義為表單的action屬性。 這將自動阻止表單提交。

iv）。 通過從事件處理程序返回false 。 您目前正在做什么。 奇怪的是，它不能像jQuery文檔本身所說的那樣工作：

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

也許以下帖子可以為您提供幫助： jQuery-表單仍提交，但返回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;   
    }); 
});