将带有参数的 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

的方式调用它

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

即<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>

我只想要一个简单的解决方案来解决这个问题。

非常感谢任何帮助。

Answer 1

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

我做了一些测试 - 似乎这是一个罪魁祸首： 数据类型：'text/html'

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

dataType 允许的值：

"xml"
"html"
"json"
"jsonp"
"text"
多个，space-分隔值

我试过了 数据类型：'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'，数据类型：'text/html'， success:function（数据） { 警报（数据）； document.write（数据）； } });

我做了一些测试 - 似乎这是一个罪魁祸首： 数据类型：'text/html'

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

dataType 允许的值：

"xml"
"html"
"json"
"jsonp"
"text"
多个，space-分隔值

我试过了 数据类型：'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' ^_^

回复评论：

是的，您已经掌握了要点。这是实现它的一种方法（这对我的思维方式和组织代码来说会很舒服）：

<html>
<head>
    <script>
    // defining tool:
    function updateRankForSite( inUrl, $inInsertTo ) {
        $.ajax({
            url: 'code/rank.php?url=' + inUrl,
            type: 'get',
            dataType: 'text',
            cache: false,
            success: function(data)
            {
                alert(data);
                $inInsertTo.html(data);
            } 
        });
    }
    </script>
    <script>

    // using tool:
    $(function(){
        outputRankForSite( 'google.com', $('#rank-google') );
        outputRankForSite( 'yandex.com', $('#rank-yandex') );

        // and here is example how to interact with user
        $('button-1').click( function( event ) {

            // comment
            // event.preventDefault() blocks default behavior
            // for clicking on <a href="...">...</a> tag
            // that means you wouldn'd be redirected to href
            event.preventDefault();
            outputRankForSite(
                'whosebug.com',
                $('#rank-Whosebug')
            );

            // comment:
            // and you can leverage not just 'whosebug.com'
            // but anything that user wants - he can
            // put his request to <input="text" id="example-input" ...>
            // and you could collect his input by using command like
            // $('#example-input').val()
        });
    });
    </script>
</head>
<body>
    <p>Alexa rank for google.com: <span id="rank-google"></span></p>
    <p>Alexa rank for yandex.com: <span id="rank-yandex"></span></p>
    <p>
        Alexa rank for whosebug.com (press button to get rank):
        <span id="rank-Whosebug"></span>
    </p>
    <a href="#" id="button-1">Press this button to update rank</a>
</body>
</html>

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

Load contents of alexa php results with parameters into html page - Maybe using jquery or ajax

php

api

ajax

jquery

alexa

回复评论：