Question

我正在通过ajax在staff_view.php中加载名为main.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而不是通常的＃34;重定向到页面提交＃34;表单自动使用，必须禁止默认操作。

改变这个：

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

Answer 2

单击锚标记时需要阻止默认操作，这会将您重定向到href属性中的链接

$('ul#nav li a').click(function(e){
    e.preventDefault(); 
    var page = $(this).attr('href');
    $('.content_load').load(page);
    // code...

这是导致重定向的原因

Answer 3

我可能错了，但看起来你可能有一个竞争条件来加载页面并附加提交监听器。执行$('form.ajax')位后，页面可能会加载。

$('.content_load').load(page); // Race condition? $('form.ajax').on('submit', function() {

一个修复方法是将以下代码移动到完成回调中：

$('.content_load').load(page, function() { $('form.ajax').on('submit', function(e) { e.preventDefault(); // ... });

另外，添加e.preventDefault();以防止表单实际提交。

ajax请求页面重定向

3 个答案: