Question

我一直试图让这个表单加载几天，但我能得到的是提交到页面的表单（不是我想要的，我希望表单提交然后关闭模式和然后将news.php中的成功消息发送到div＆＃34; thanks＆＃34; holder）。

任何人都可以发现我所遇到的问题，它会加载＆＃34; news.php＆＃34;网页？

<div id="thanks"></div>    
<div class="modal fade" id="newsModal" tabindex="-1" role="dialog" aria-labelledby="newsModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="newsModalLabel">Add a News Post</h4>
                      </div>
                      <div class="modal-body">
                                <form class="addNew" role="form" method="POST" action="news.php">
                                  <div class="form-group">
                                    <input type="text" name="title" class="form-control" id="title" placeholder="Enter title here...">
                                  </div>
                                  <div class="form-group">
                                    <textarea class="form-control" name="message" rows="7" placeholder="Enter news post here..."></textarea>
                                  </div>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary" id="addNews">Add News Post</button>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

和javascript是：

<script type="text/javascript">
        $(document).ready(function () {
            $("button#addNews").click(function(){
                $.ajax({
                    type: "POST",
                    url: "news.php",
                    data: $('form.addNew').serialize(),
                    success: function(msg){
                        $("#thanks").html(msg) //hide button and show thank you
                        $("#newsModal").modal('hide');
                    },
                    error: function(){
                        alert("failure");
                    }
                });
            });
        });
  </script>

Answer 1

您没有将事件对象传递给您的点击装订：

<script type="text/javascript">
$(document).ready(function (e) { // pass the event object
    $("button#addNews").click(function(){
        e.preventDefault(); // disable the POST of the form by the submit button
            $.ajax({
            type: "POST",
            url: "news.php",
            data: $('form.addNew').serialize(),
            success: function(msg){
                $("#thanks").html(msg) //hide button and show thank you
                $("#newsModal").modal('hide');
            },
                error: function(){
                alert("failure");
            }
        });
    });
});

哎呀，我忘了the BootPly of my test。我刚刚将你的POST请求替换为GET，我不知道如何在BootPly中发出POST请求。

Answer 2

按钮#addNews是表单的提交按钮，它的点击事件也是用ajax调用绑定的。单击它时，ajax进程在提交表单时开始执行。

您需要删除<form... start＆amp;结束标记。

bootstrap处理ajax表单提交

2 个答案: