bootstrap处理ajax表单提交

Question

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

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>

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>

Answer 1

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

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.