#javascript #php #jquery #ajax #safari
#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. Кажется, это работает, однако это немного запутанно… Я все еще чувствую, что должно быть лучшее решение, но, по крайней мере, это работает.