我的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;   
    }); 
});