如何使用ajax插入iFrame/PHP


How to insert iFrame/PHP with ajax?

我正在尝试包含一个类似Facebook的按钮iFrame,其中包含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;
                   });

当我尝试将iframe包含在上面的js中时,什么也没发生。没有错误,没有返回任何内容。。。

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

在构建<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);
      }
   });
}

这当然是为了展示原理,而不一定是您需要编写的确切代码。您需要添加其他功能(如隐藏以前的引号等)