php - ajax请求页面重定向

Question

我正在通过ajax在main.php中加载一个名为staff_view.php的表单。它加载正常，但是当我将表单提交到 staff_post.php 时，它会重定向到它而不是显示在控制台中，在我添加使用 ajax 加载表单的代码之前，它会正常发布，但在重定向之后。

这是我的代码

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

因为它是一个表单，并且您希望通过 AJAX 提交，而不是表单自动使用的通常的“重定向到页面”方法，所以您必须禁止默认操作。

更改此:

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

对此:

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