如何将php代码转换为AJAX的JS

How to convert php code to JS for AJAX

本文关键字：AJAX JS 转换 代码 php      更新时间：2023-09-26

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

在我的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秒更新一次数据。关于之前的一个问题，我收到了这个回复，但我不知道该怎么做。如果能得到任何帮助，我将不胜感激。我从未通过javascript运行过数据，也从未使用过ajax，我不知道从哪里开始。

使用此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);
      });

这当然可以通过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淡入淡出动画以删除"闪烁"

由于安全原因，无法使用JavaScript完成此操作。您无法从域以外的域获取数据。

但是，如果您的API提供JSON-RPC接口，那么使用JSON-RRPC是可能的。

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

相关文章：