Fatal编程技术网
  • javascript/
  • Javascript 如何将php代码转换为JS for AJAX

Javascript 如何将php代码转换为JS for AJAX

javascript php jquery ajax json

Javascript 如何将php代码转换为JS for AJAX,javascript,php,jquery,ajax,json,Javascript,Php,Jquery,Ajax,Json,我在一个文件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/javascr

我在一个文件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>
我正在寻找一些帮助来将php代码转换成javascript，这样我就可以通过ajax每10秒更新一次数据。在前面的一个问题上，我收到了回复，但我不知道怎么做。如果能得到任何帮助，我将不胜感激。我从来没有通过javascript运行过数据，也没有使用过ajax，我不知道从哪里开始。

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

但是，如果您的API提供JSON-RPC接口，JSON-RPC是可能的

我认为你的投票被否决了，因为你不是在问问题而是在问服务，这不是StackOverflow的目标，这肯定可以通过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>");
             }     
});
我还没有完成它，只是做了足够多的工作让你开始，你知道剩下的事情，不要害羞地寻求帮助

这是JSFIDLE，玩它：享受吧

编辑：

为“无可用数据”分叉：还添加了jQuery淡入淡出动画以消除“闪烁”使用此选项 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);
      });
我真的不明白为什么这被否决了；我只是想寻求帮助，摆脱我的php代码，并通过JS实现它，这样我就可以实现settimeout/setinterval。。这对其他人怎么没用？我不知道我在用JS或AJAX做什么，我从来没有用过它们，我不能要求别人帮我指点一下指南什么的？你又发了几乎相同的问题。关于你前面的问题，答案足以帮助你解决问题。这就是你的问题被否决的原因。这个问题似乎离题了，因为堆栈溢出不是一种语言转换服务。在这个php上，每10秒发送jquery ajaxfile@LittleBobbyTables我试图找出如何使我的PHP代码每10秒自动更新一次，但我不知道如何做到这一点。在我的上一个问题中，我得到了很多很好的答案，但我不能把这些部分放在一起。我将用我尝试过的代码更新我的OP。我现在在OPI中从我自己的域中获取数据，可能是因为它不起作用而出错了：/但是我尝试向它添加一个setInterval。。感谢您迄今为止提供的帮助@Sameer ShemnaI如果您不认为您正确理解了异步请求的概念，您应该阅读更多内容，并参考JSFIDLE的这一分支：还要查看控制台以查看何时触发事件和何时接收数据谢谢@Sameer Shemna，我刚刚测试了它，效果很好。帮你自己一个忙阅读AJAX和jQuery，帮我一个忙，把答案标记为已接受；谢谢@Sameer Shemna，我正在阅读它，因为我正在尝试定制它。如果没有数据，有没有办法改变我上面写着入侵追踪者的文字？是没有数据时的样子。如果没有数据，我想将文本改为其他内容，直到有数据，然后可以说是入侵跟踪器。我感谢@Harutyun Abgaryan，现在它正在输出JSON。我希望它能输出JSON的格式化版本。我尝试更改$main.htmldata；到$main.htmldirect:+index+Cog:+value.type+Progress:+value.Progress+；但在Sameer的答案中，它不能正常工作。你能帮我吗？是的，给我发你的skype姓名我更改代码在Ajax中添加数据类型：html谢谢，这非常有效。没有令人讨厌的闪烁，我可以用我的PHP来设计它。耶！您可以这样做，但肯定不是一个好的实践，当您可以在客户端Javascript中完成全部工作时，为什么要使用服务器端PHP并导致服务器负载。检查我的提琴叉。 
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>");
             }     
});

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