Ajax请求页面重定向

Question

I am loading a form named staff_view.php in main.php through ajax. It's loading fine but when I submit form to staff_post.php it's redirecting to it instead of showing in console, before I add the code for loading form using ajax it was posting fine but after it's redirecting.

Here is my code

$(document).ready(function() {            
    $('.content_load').load('staff_view.php');
    $('ul#nav li a').click(function() {
        var page = $(this).attr('href');
        $('.content_load').load(page);
        $('form.ajax').on('submit', function() {
            var that = $(this);
            url = that.attr('action'),     
                type = that.attr('method'), 
                data = {};

            that.find('[name]').each(function(index, value) {            
                var that = $(this),
                    name = that.attr('name'),
                    value = that.val();
                    data[name] = value;
            });

            $.ajax({
               url: url,
               type: type,
               data: data,
               success: function(response){
                   console.log(response);
               }
            });
        });
        clearAll();
        return false;
    });
});

function clearAll(){
    $("form :input").each(function(){
        $(this).val(""); 
    });
}

Answer 1

Because it's a form, and because you wish to submit via AJAX instead of the usual "redirect-to-page" method that forms automatically use, you must suppress the default action.

Change this:

$('form.ajax').on('submit', function(){
    var that = $(this);
    etc.

to this:

$('form.ajax').on('submit', function(e){  // <=== note the (e)
    e.preventDefault();                   // <=== e used again here
    var that = $(this);
    etc.