Асинхронный Ajax не работает в Safari с перенаправлением

ProgramBox

Асинхронный Ajax не работает в Safari с перенаправлением

Post author:admin
Запись опубликована:8 февраля, 2023
Post category:Вопросы по программированию

#javascript #php #jquery #ajax #safari

Вопрос:

У меня возникли проблемы с асинхронным вызовом Ajax, который не работает в Safari. Он работает во всех других браузерах, но не в Safari. Это проблема только тогда, когда у нас есть перенаправление / ссылка на кнопку или привязку, по которой нажимается для вызова функции Ajax.

Я создал действительно простой пример ниже:

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajax issue is Safari</title>
<script src="//code.jquery.com/jquery-2.2.3.js"></script>
<script>
 $( document ).ready(function() {
    $('#mybutton').click(function(){
        $.ajax({
            type: "POST",
            dataType: "text",
            async: true,
            url: "dosomething.php",
            error: function(a,b,c){
                alert("Ajax Error");
            },
            success: function(data){
                alert(data);
            },
        });
    });
}); 
</script>
</head>
<body>
<a href="page2.php" id="mybutton">Click here</a>
</body>
</html>

Где dosomething.php есть

 <?php 

echo "Success. Click ok to be redirected.";

?>

Живая версия этого примера находится здесь: http://visionfactor.com.au/ajax-safari /

Пока есть href=, Ajax всегда будет выдавать ошибку. Как только я удалю href, он заработает. То же самое происходит, если я использую кнопку вместо якоря и перенаправляю с помощью Javascript. Тот же результат, пока перенаправление на месте.

Теперь я понимаю, что могу поместить перенаправление в обратный вызов Ajax success, однако я не хочу этого делать, поскольку это кажется ненужным, поскольку в Safari он должен работать по-другому, как и во всех других браузерах. Также в моем реальном (не упрощенном) коде это довольно сложно, поскольку у меня один и тот же класс для нескольких ссылок / кнопок, поэтому все они выполняют один и тот же Ajax, но затем каждый перенаправляет в другое место. Итак, тогда мне пришлось бы передать какое-то другое значение, например, другой класс, чтобы определить соответствующее перенаправление, специфичное для этой ссылки … как я уже сказал, беспорядочно.

Как я могу заставить этот действительно простой код работать в Safari?

Спасибо, Николь

1. firefox быстро выдает сообщение «Ошибка Ajax», затем появляется страница 2 — перенаправление не происходит

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

3. Ошибка в dosomething.php . Попробуйте return false; после вызова ajax и устраните неполадки в вашем коде

4. Так и в firefox — спасибо, что указали на это. Как ни странно, этого не происходит с моим реальным примером. Я не тестировал эти простые версии в Firefox, так как я просто собрал их очень быстро.

5. Что не так с dosomething.php ? В чем ошибка с этим файлом?

Ответ №1:

попробуйте добавить preventDefault вот так :

 $( document ).ready(function() {
    $('#mybutton').click(function (event) {

        event.preventDefault(); // stop the click to redirect to the URL in href

        $.ajax({
            type: "POST",
            dataType: "text",
            async: true,
            url: "dosomething.php",
            error: function(a,b,c){
                alert("Ajax Error");
            },
            success: function(data){
                alert(data);
            },
        });
    });
});

1. Привет, ммм, я не уверен, что вы поняли мою проблему. Я хочу, чтобы он перенаправлял на URL-адрес и выполнял асинхронную синхронизацию ajax в фоновом режиме. Если бы я не хотел, чтобы он переходил на URL-адрес, я бы удалил URL-адрес, и ajax просто работал бы нормально.

2. Я разработал решение, основанное на предотвращении события по умолчанию, затем захвате ссылки href из исходной ссылки и перенаправлении в это место в функции успеха ajax. Кажется, это работает, однако это немного запутанно… Я все еще чувствую, что должно быть лучшее решение, но, по крайней мере, это работает.