引导处理ajax表单提交 [英] bootstrap handling a ajax form submission

问题描述

几天来我一直在尝试加载此表单，但是我所能获得的就是将表单提交到页面(不是我想要的，我希望表单提交然后关闭模式和然后将来自news.php的成功消息放入div谢谢"持有人).

I have been trying to get this form to load for a couple days now, but all I can get is the form to submit to a page (not what I want, I want the form to submit and then close the modal and then put a success message from news.php into the div "thanks" holder).

任何人都可以发现我遇到的问题将在哪里加载"news.php"页面吗?

Can anyone spot the issue I am having where it will one load the "news.php" page?

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

and the javascript is:

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

推荐答案

您没有将事件对象传递给点击绑定:

You didn't pass the event object to your click binding :

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

糟糕，我忘记了测试的BootPly . 我只是将您的POST请求替换为一个GET请求，我不知道如何在BootPly中发出POST请求.

Oops, I forgot the BootPly of my test. I just replaced your POST request to a GET one, I don't know how to make POST request inside BootPly.

这篇关于引导处理ajax表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！