php - 将带有参数的alexa php结果的内容加载到html页面中-也许使用jquery或ajax

Question

我正在尝试将网站的 alexa 排名作为一段文本加载到标准的 html 文件中。我想避免将整个页面设置为 php，所以我创建了一个名为 rank.php 的 php 文件，它可以工作

<?php
$url=$_GET["url"];
$xml = simplexml_load_file('http://data.alexa.com/data?cli=10&dat=snbamz&url='.$url);
$rank=isset($xml->SD[1]->POPULARITY)?$xml->SD[1]->POPULARITY->attributes()->TEXT:0;
echo $rank;
?>

我可以将其加载到我的服务器并使用 rank.php?url=google.com 之类的名称调用它

这会在屏幕上返回一个数字（在本例中为 1）。那么如何将该数字放入<p>html 文档中的普通标签中。

IE<p>Alex rank: </p>

我正在研究 jquery 并使用 get 方法，但我迷路了。

例如把它放在<head></head>标签中

<script>
$(document).ready(function(){
$("#div1").load("code/rank.php?url=google.com");
});
</script>

然后在我的html页面中添加

<p>Alex rank: <div id="div1"></div></p>

对我不起作用。

我还尝试在<p></p>标签中添加以下脚本。

 <script type="text/javascript">
       function showGetResult( name )
{
 jQuery.ajax({
    url: 'code/rank.php?url=google.com',
    type: 'get',
    dataType: 'text/html',
    success:function(data)
    {
        alert(data);
        document.write(data);
        } 
     });
}

showGetResult('test');
</script>

我只想要一个简单的解决方案来拉动这个数字。

非常感谢任何帮助。

score 2 · Accepted Answer

 jQuery.ajax({
    url: 'code/rank.php?url=google.com',
    type: 'get',
    dataType: 'text/html',
    success:function(data)
    {
        alert(data);
        document.write(data);
        } 
 });

我做了一些测试 - 似乎这是罪魁祸首： dataType：'text/html'

为什么：在 jQuery 的文档中 - 在http://api.jquery.com/jQuery.ajax/

dataType 允许的值：

“xml”
“html”
“json”
“jsonp”
“文本”
多个空格分隔的值

我试过 dataType: 'text'

为我工作。

一定要把你的脚本标签放在后面

如果您在页面内联执行它

<p>Alexa rank: <span id="div-1"></span></p>

<script>
 jQuery.ajax({
    url: 'code/rank.php?url=google.com',
    type: 'get',
    dataType: 'text',
    cache: false,
    success: function(data)
    {
        alert(data);

        // comment: $('#div-1').html(data)
        // inserts data inside $('#div-1')
        $('#div-1').html(data);
    } 
 });
</script>

但更清洁的方法是：

<html>
<head>
   <script>

   // comment:
   //     in jQuery
   //         $( yourFunction )
   //     is a shortcut for
   //         $(document).ready( yourFunction )
   $(function(){
      jQuery.ajax({
          url: 'code/rank.php?url=google.com',
          type: 'get',
          dataType: 'text',
          cache: false,
          success: function(data)
          {
              alert(data);

              // comment: $('#div-1').html(data)
              // inserts data inside $('#div-1')
              $('#div-1').html(data);
          } 
       });
   });
   </script>
</head>
<body>
   <p>Alexa rank: <span id="div-1"></span></p>
</body>
</html>

在最后一个代码中，我使用了cache: false因为我觉得这对这种情况有好处。我正在使用dataType: 'text'因为您只需要一个数字 - 那为什么不呢？它对我来说只是更多的亲吻。也许它可以与'html'一起使用。

顺便说一句 - 可能有另一个地方可以隐藏另一个错误：code/rank.php?url=google.com

如果您当前的 URL 是 www.example.com/somefolder/ 那么它将被解释为 www.example.com**/somefolder/**code/rank.php?url=google.com

如果您当前的 URL 是 www.example.com/somefolder/another/ 那么它将被解释为 www.example.com**/somefolder/another/**code/rank.php?url=google.com

我的建议 - 您可以随时使用 Firefox 或 Google Chrome 开发者工具 > 网络查看返回 ajax 请求的内容 - '1' 或 'PAGE 404 NOT FOUND' ^_^ jQuery.ajax({ url: 'code/rank. php?url=google.com'，类型：'get'，dataType：'text/html'，成功：function(data) { alert(data); document.write(data); } });