如何使用ajax插入iFrame / PHP?

时间:2012-01-21 18:20:01

标签: php javascript jquery ajax facebook

我正在尝试包含一个像按钮iFrame的Facebook,其中包含PHP:

 <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $row['id']; ?>&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

当网站加载时,它会显示在列表中:

   <ul class="recent-list">
        <?php 
            require("inc/connect.php");
            $result = mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT 0, 20", $link);
            while($row = mysql_fetch_array($result)){   ?>

            <li id="qoute-<?php echo $row['id']; ?>"  class="quote-wrap group">
                <span>

                            <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo $row['id']; ?>&send=false&layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe>

                </span>

                <div class="quote">

                    <p>
                    <?php echo htmlentities($row['quote']); ?>
                    </p>

                </div><!-- /.quote -->
            </li>

                <?php } ?>
</ul>

但是当有人点击一个可以获取更多列表项的按钮时,应该包含iFrame ......

function getQuotes(start, limit) {
                //Clear the recent list element
                //$(".recent-list").html("");
                var  recent = $(".recent-list");

               $(".recent-list li").animate({opacity: 0.1} , 800).hide(500);

                $.ajax({

                  url: "quotes.php?start=" + start + "&limit=" + limit,
                  success: function (data) {
                    data = jQuery.parseJSON(data)
                    console.log("success");
                    //Data should now be a javascript array of objects.
                    for (i = 0; i < data.length; i++) {
                      var newElem = jQuery("<li></li>").attr('id', data[i].id).addClass('quote-wrap-group');
                      newElem.append("<div class='quote'><p>" + data[i].quote + "</p></div>");
                      $(".recent-list").append(newElem);
                    }
                  }
                });
              }
                 var currentIndex = 0;  
                   $("#more").click(function () {

                     getQuotes(currentIndex, 20);
                     currentIndex += 10;
                   });

当我尝试在上面的js中包含iframe时,没有任何反应。没有错误,没有任何回报...

quotes.php:

$start = $_GET['start'];
    $limit = $_GET['limit'];

    $sql = "SELECT * FROM entries ORDER BY id DESC LIMIT ".$start.", ".$limit;
    $result = mysql_query($sql, $link) or die("Error in query: ".mysql_error());

    $data = array(); 

    while($row = mysql_fetch_array($result)) {
        array_push($data, $row);
    }

    echo(json_encode($data));

直播版。点击“获取更多”。引号出现,但没有像按钮那样。

http://kdevs.site40.net/#more

1 个答案:

答案 0 :(得分:1)

在构建<li>成功函数

时,您没有添加iframe代码

你所做的只是添加(每行):

<li id="54" class="quote-wrap-group">
    <div class="quote">
         <p>fdggfdgdgdgfdg</p>
    </div>
</li>

更好的方法是在服务器端制作整个列表项,然后回显它,然后将您在成功中收到的html附加到现有列表

例如:

你的php看起来像这样:

$data = getData();//Get the data from the database here;
foreach($data as $row): 
?>
   <li id="qoute-<?php echo $row["id"];?>" class="quote-wrap group">
       <span>
           <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo row["id"];?>&amp;send=false&amp;layout=button_count" style="border: medium none; overflow: hidden; width: 115px; height: 21px;" allowtransparency="true" frameborder="0" scrolling="no"></iframe> 
      </span>
      <div class="quote"><p><?php echo $row["quote"];?></p></div>
   </li>
<?php endforeach; ?>

你的javascript函数将是:

function getQuotes(start, limit){
    $.ajax({
      url:"quotes.php?start=" + start + "&limit=" + limit,
      dataType: "html",
      success: function(response){
         $("ul.recent-list").append(response);
      }
   });
}

这当然是试图显示原理,而不一定是你需要编写的确切代码。您需要添加其他功能(例如隐藏之前的引号等...)