带有Jquery的Ajax-未执行回调

Question

I have tried so many things, cannot figure this out, I am using this code, and I know that the start is working, because the script it connects to sticks some info in the db, but the callback never runs.

<script type="text/javascript">
$(document).ready(function() {
    $(document.body).on('click', "#reply_submit", function() {
            var formData = $('#reply').serialize();


            $.post("newpost.php",formData, function(data){
                    alert("hi");
             }, "json");
    });

});

My form's id is "reply" and the button I am using to submit it is "reply-submit", just to make sure those things are clear.

It also doesn't work if I remove that last "json" thing btw.

Answer 1

If you read the docs for jQuery.post() , it says this about the callback:

success(data, textStatus, jqXHR)
A callback function that is executed if the request succeeds.

If it's not getting called, it means that request did not succeed. There is probably an error in newpost.php (sometime after the data insert, but before it would normally exit).

You can also catch error conditions by using the long-form jQuery.ajax() instead of the post shorthand:

$.ajax({
    url: 'newpost.php',
    data: formData,
    type: 'post',
    dataType: 'json',
    success: function(data, textStatus, jqXHR) {
        alert('success');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert('error!');
    }
});

Answer 2

When you click, the form is also being submitted the standard way. Modify your click handler like this:

$(document).on('click', "#reply_submit", function(e) {
  e.preventDefault(); // prevent the default submit event
  var formData = $('#reply').serialize();
  // ...
});

Although I think document.body should be a valid node to wrap in jQuery, I've also modified it to the more commonly used document .

On that note, if the form is never destroyed by an Ajax event or other DOM modification, you could bind to #reply instead of document (or body ).

Answer 3

I'm simply assuming that you want to submit a form without reloading the whole page. Based on that assumption, following code will serve the purpose.

$(document).ready(function(){

//on form submit event
$('form#reply').submit(function(){
    $.post('newpost.php',$(this).serialize(),function(){
        alert("Message or do something with the response data if you are expecting one");
    });

    //prevent default action
    return false;   
});

}); 

Please ignore the post if this is not the functionality you are looking for in your project.