将带有参数的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）。 因此，如何将这个数字放入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);
        } 
 });

我进行了一些测试-看来这是罪魁祸首： 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

如果您当前的网址是www.example.com/somefolder/，则它将被解释为www.example.com ** / somefolder / ** code / rank.php？url = google.com

如果您当前的网址是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'，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

如果您当前的网址是www.example.com/somefolder/，则它将被解释为www.example.com ** / somefolder / ** code / rank.php？url = google.com

如果您当前的网址是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'（找不到页面404）^ _ ^

回答评论：

是的，您的要点是正确的。 这是实现它的一种方法（这对我的思考和组织代码的方式来说很舒服）：

<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(
                'stackoverflow.com',
                $('#rank-stackoverflow')
            );

            // comment:
            // and you can leverage not just 'stackoverflow.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 stackoverflow.com (press button to get rank):
        <span id="rank-stackoverflow"></span>
    </p>
    <a href="#" id="button-1">Press this button to update rank</a>
</body>
</html>

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-03-08 13:46:30

回答评论：

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-03-08 13:46:30

回答评论：

解决方案1
2 已采纳 2016-03-08 13:46:30