Question

我在一个文件中有以下代码（invasionions.php）：

<!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' />
    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
    <script type='text/javascript' src='script.js'></script>
  </head>
<body>
  <div id='output'>
<?php
$url = "my api link here";
$data = json_decode(file_get_contents($url));
if(!empty($data->invasions)) {
    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>";
}
?>
</div>
</body>
</html>

在我的invasionapi.php中，我有：

<?php
$assocArray = "https://www.toontownrewritten.com/api/invasions";
echo (file_get_contents($assocArray));
?>

在我的script.js中，我有：

$(function(){
function getData(){
  $.post('invasions.php', function(data){
    // var htm = do a bunch of stuff with the data Object, creating HTML
    $('#output').html(htm);
  });
}
setInterval(getData, 10000); // query every 10 seconds
});

我正在寻找一些帮助将这个PHP代码转换为javascript，这样我就可以通过ajax每10秒更新一次这个数据。在上一个问题上，我收到了this回复，但我不知道该怎么做。我很感激能得到的任何帮助。我从来没有通过javascript运行数据，或者使用ajax，我不知道从哪里开始。

Answer 1

肯定可以通过Javascript完成，它是一个API服务。

使用jQuery Library然后添加以下内容：

var url = "https://www.toontownrewritten.com/api/invasions";
    $.get(url,{},function(data){
        for(var index in data.invasions){
              console.log(index);
            var value = data.invasions[index];
            console.dir(value);

                  $('#main').append("<h3 style='text-align:center;margin:auto;'><b>District:</b> "+index+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Cog:</b> "+value.type+"</h3><br style='font-size:1px;'><h3 style='text-align:center;margin:auto;'><b>Progress:</b> "+value.progress+"</h3>");
             }     
});

我还没有完成它，只是做得足够让你开始，你弄明白其余的，并且不要害羞地寻求帮助。

这是JSFiddle，玩它：http://jsfiddle.net/sameersemna/atyz2nw7/享受！ ;）

编辑：

为“没有可用数据”分配你的小提琴：http://jsfiddle.net/sameersemna/1tskmv1k/还添加了jQuery淡入淡出动画以删除'闪烁'

Answer 2

使用它 set url =＆＃34;你的php文件网址＆＃34;

$(document).ready(function(){
        var callAjax = function(){
          $.ajax({
            method:'get',
            url:'random.php',
            dataType:'html',
            success:function(data){
              $("#sample").html(data);
            }
          });
        }
        setInterval(callAjax,2000);
      });

Answer 3

出于安全原因，无法使用JavaScript。您无法从域以外的域中获取数据。

但是，如果您的API提供JSON-RPC接口，则可以使用JSON-RPC。

而且我认为你的投票是因为你不是问一个问题而是服务，它不是StackOverflow的目标

如何将PHP代码转换为JS for AJAX

3 个答案: