Использование location.href = с функцией click, запрещает отправлять мою форму

Question

У меня есть форма со следующей кнопкой:

<input id="test2" class="formbutton" type="submit" value="Play again" />

При нажатии на кнопку отправки запускается этот javascript:

$("#test2").click(function(){
        $.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

Это все работает нормально.Проблема в том, что когда я пытаюсь объявить location.href="mahjong.php?layout=win";, я хочу, чтобы при нажатии этой кнопки форма отправлялась и загружала URL-адрес mahjong.php? Layout = win

Если я использую:

$("#test2").click(function(){
location.href="mahjong.php?layout=win";
$.ajax({   
            type: "POST",
            data: $("#form").serialize(), 
            cache: false,  
            url: "insert.php"  
        });   
        return false;
    });

Я захожу на URL, но форма не всегда отправляется.Как это исправить.Я не могу редактировать файл insert.php, так как этот файл используется и другими кнопками (где перенаправление не требуется)

Answer 1

Перейти по ссылке после возврата формы, используя обработчик success:

$("#test2").click(function () {
    $.ajax({
        type: "POST",
        data: $("#form").serialize(),
        cache: false,
        url: "insert.php",
        success: function () {
            location.href = "mahjong.php?layout=win";
        }
    });
    return false;
});

Вероятно, стоит разместить на странице визуальное уведомление, например, вращение или отключение кнопки, чтобы пользователь знал, что происходит, и больше не нажимал кнопку.

Answer 2

Как только вы установите location.href, текущая страница будет выгружена и все сценарии на ней остановятся.

Используйте (отложенный) обработчик завершения:

$("#test2").click(function () {
    $.ajax({
        type: "POST",
        data: $("#form").serialize(),
        cache: false,
        url: "insert.php",
    })
    .then(function() {
        location.href = "mahjong.php?layout=win";
    });
    return false;
});

Answer 3

ставьте location.href после вызова ajax, в противном случае вы можете покинуть страницу до того, как вызов ajax будет отправлен.

Если это не работает, поместите location.href в функцию обратного вызова вызова ajax, чтобы он загружал новую страницу после получения ответа от сервера, чтобы вы могли быть уверены, что данные были отправлены .