如何将 php 代码转换为用于 AJAX 的 JS [关闭]

Question

我在一个文件（invasions.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>

在我的invitationapi.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 提供 JSON-RPC 接口，则可以使用 JSON-RPC。

我认为你被否决了，因为你问的不是问题而是服务，这不是 StackOverflow 的目标

Answer 2

肯定可以用Javascript来做，是API服务。

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

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 3

使用这个 set url = "你的 php 文件 url"

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