JavaScript — автоматическое обновление с AJAX
В настоящее время я использую этот код на своей веб-странице:
<?php
$url = "https://www.toontownrewritten.com/api/invasions";
$data = json_decode(file_get_contents($url));
if (!empty($data->invasions)) {
echo "<h1 style='text-align:center;margin:auto;padding:2px;font-size:16px;font-weight:bold;text-decoration:underline;padding:2px;'>Invasion Tracker</h1>";
$i = 0;
foreach($data->invasions as $title => $inv) {
print "<h3 style='text-align:center;margin:auto;'><b>District:</b> {$title}
</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> {$inv->type}
</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> {$inv->progress}
</h3>";
if (count(($data->invasions) > 1)) {
if (end($data->invasions) !== $inv) {
print "<hr>";
} else {
print "<br style='font-size:2px;'>";
}
}
}
} else {
echo "<h1 style='text-align:center;margin:auto;padding:2px;color:darkred;font-weight:bold;'>No invasions!</span>";
}
?>
Я хочу, чтобы он обновлялся каждые 10 секунд через AJAX. Тем не менее, я продолжаю читать, вам нужно сделать функцию, но я не уверен, как бы я сделал это с API? Каждые 10 секунд этот API обновляется, поэтому я бы хотел, чтобы это обновлялось с помощью AJAX каждые 10 секунд. В настоящее время у меня есть, поэтому пользователь должен обновить вручную. Любая помощь приветствуется!
Решение
Вы можете просто перезагрузить страницу с предложенным методом Вот
Но если вы хотите иметь реализацию AJAX, которая просто обновляет часть вашего HTML-кода, вы должны будете
- Почти забыть свой код PHP
-
используйте следующий код для реализации запроса к URL
$.ajax({
url: "https://www.toontownrewritten.com/api/invasions",
})
.done(function( data ) {
if ( console && console.log ) {
console.log( data );
}
}); -
Делать
JSкод, который будет преобразовыватьdataпопал в предыдущий раздел в читаемый HTML и показать его на своей странице. Это должно быть реализовано в блоке, гдеconsole.log(data)является. -
Поместите эту часть кода в setInterval
setInterval(function(){
//$.ajax();
}, 10000); -
И имейте в виду, что вы попадете в ад, если ваш запрос не будет выполнен в течение интервала. увидеть этот .
Другие решения
У меня есть лучшее предложение, опять же, как и использование setInterval,
setInterval(function () {
if (isActive) return; // so that if any active ajax call is happening, don't go for one more ajax call
isActive = true;
try {
$.ajax("URL", params,function() { isActive = false;//successcallback }, function () {
isActive = false; // error callback
});
} catch (ex) { isActive = false;}
}, 10000);
Ваша проблема — неспособность понять AJAX. Ниже $.post() пример.
Сначала давайте сделаем страницу, которую должен видеть ваш клиент (пользователь браузера):
viewed.php
<?php
$out = '';
// you could even do your initial query here, but don't have to
?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<style type='text/css'>
@import 'whatever.css';
</style>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script type='text/javascript' src='whatever.js'></script>
</head>
<body>
<div id='output'><?php /* if initial query took place */ echo $out; ?></div>
</body>
</html>
Теперь вам нужен ваш JavaScript в whatever.js,
$(function(){
function getData(){
$.post('whatever.php', function(data){
// var htm = do a bunch of stuff with the data Object, creating HTML
$('#output').html(htm);
});
}
getData(); // don't need if PHP query takes place on original page load
setInterval(getData, 10000); // query every 10 seconds
});
На whatever.php:
<?php
// $assocArray = run database queries so you can create an Associative Array that can be converted to JSON
echo json_encode($assocArray);
?>
JSON, сгенерированный PHP, отображается в data аргумент, обратно в JavaScript, который создал ваш запрос PHP:
$.post('whatever.php', function(data){