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提交表单之后。并且，作为默认行为，您的表单会在未指定操作参数的同一页面上提交自己。

因此，有多种方法可以做到这一点。

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

这是最正式的做法。

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。您目前正在做什么。奇怪的是它不起作用，因为jQuery doc本身说：

我们可以通过调用事件对象上的.preventDefault()或从我们的处理程序返回false来取消提交操作。

也许以下帖子可以帮助您： jQuery - Form still submits with return false

另请查看上述帖子中Chen-Tsu Lin的答案。当您不应该使用return false时，会给出一个链接。

希望这有帮助。

Answer 3

使用e.preventDefault（）;

<tr wicket:id="listView">
    <td>
        <a wicket:id="link">Some Link Text Here</a>
    </td>
</tr>

Answer 4

var value;
database.query1(param1, param2, function(err, outerResults) {
    if (outerResults == null) {
        database.query2(params1, params2, function(err, innerResults) {
            value = innerResults;
        });
        console.info(value); // I am not able to get the value of  this innerResults outside the function
    }
});

上面的jquery语句默认会提交折叠，这实际上会重新加载代码。如果您不希望发生这种情况，

添加以下内容

$('#guideForm').submit()

这会阻止提交表单并执行函数

中的代码

Answer 5

我认为你的js中有一个错误，这就是为什么它没有按预期执行，你检查过你是否收到任何错误？也许是因为你的$ .ajax函数没有终止..尝试添加“;”终止子。

event.preventDefault();

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

我的ajax不断刷新整个页面而不是div

6 个答案: