Question

我能够通过Ajax从Bootstrap popover中成功发布此表单，但似乎e.preventDefault（）没有停止默认表单操作，因为页面在Ajax帖子之后重新加载。我想知道这是否与popover内部的形式有关？

HTML
<div class="hidden" id="replydiv">  
<form class="col-md-12" role="form" id="reply-form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post"  >
<div class="form-group">
  <label for="reply">Reply</label>
  <textarea class="form-control" id="reply" name="replytext" maxlength="500" cols="80" rows="6"></textarea>
</div>
<div class="form-group">
  <input type="text" class="form-control" id="lookup" name="reply-lookup"/>
</div>
<input type="submit" class="btn btn-primary" name="post" id="submit-reply" value="Post" />
<p class="close">x</p>
    </form>
</div>

JQ
//------------------- enable the popover ----------------------------
var popup = {trigger:"click",
    title:"Continue the conversation",
    placement: "bottom",
    content:$('#reply-form').detach(),
    html: "true"};

//-------------------- post form ------------------------------------
$('#reply-form').submit(function(e) {
    e.preventDefault()
    var datastring = $(this).serializeArray();
    datastring.push({name:"post", value:"Post"});

    var request = $.ajax({
        type: "POST",
        url: "forumposts.php",
        data: datastring,
        dataType: "json"});
        request.success(function(data) {
        console.log(data);
         })
});

Answer 1

解决方案1：

在AJAX调用之后添加return false;，如下所示：

这样做：

$('#reply-form').submit(function(e) {
    e.preventDefault()
    var datastring = $(this).serializeArray();
    datastring.push({name:"post", value:"Post"});

    var request = $.ajax({
        type: "POST",
        url: "forumposts.php",
        data: datastring,
        dataType: "json"});
        request.success(function(data) {
        console.log(data);
         })

    return false;
});

解决方案2：

添加

<button class="btn btn-primary" name="post" id="reply-form"/>

并相应地更改你的JS：

$('#reply-form').click(function()
{
        var datastring = $(this).serializeArray();
        datastring.push({name:"post", value:"Post"});

        var request = $.ajax({
            type: "POST",
            url: "forumposts.php",
            data: datastring,
            dataType: "json"});
            request.success(function(data) {
            console.log(data);
             })
});

使用Ajax时如何在Bootstrap popover中停止表单默认操作

1 个答案: