javascript – 将图像与链接集成

好吧,我认为通过下图解释我的问题可能更容易：

从图中可以看出,如果用户选择“按标题”,则会出现一个文本框,用户可以在其中编写电影标题(我也使用jQuery自动完成此文本框).然后,如果用户点击“按此标题拍摄电影”按钮,将显示一个新窗口,其中包含文本框中包含该术语的电影列表.

我的问题：

我想将这些电影的一个小图像整合在它们旁边(也许还有其他一些信息,如电影年,类型……),就像亚马逊所做的那样(Please see here).我使用renderitem作为自动完成部分并且它工作正常,但实际上我不知道如何在新窗口中执行相同操作..如果有人可以帮助我,我将非常感激.

这是我的代码：

<div id="m_scents" class="field">
   <label style="margin-bottom:10px;" for="m_scnts"></label>
   <input class="autofill4" type="textBox" name= "q27[]" id="q" placeholder="Enter movie titles here" />
   <input type="button" value="Movies by this title" id="btnMove" style="display:none;"/> 
</div>

<script type="text/javascript">
var selected;
$(document).ready(function () {
    $("input[id='selectType']").change(function(){
         if ($(this).val() == "byTitle") {
              $("#m_scents2").hide();
              $("#btnMove").show();
              $("#m_scents").show();
              $("#q").focus();
              $("#q").autocomplete({
                   minLength: 0,delay:5,source: "query.PHP",focus: function( event,ui ){
                             event.preventDefault();
                             return false;
                        },select: function( event,ui ) {
                             window.selected = ui.item.movieName;
                             return false;
                        }
              }).data("uiAutocomplete")._renderItem = function( ul,item ) {
                return $("<li></li>")
                    .data( "item.autocomplete",item )
                    .append( "<a>" + (item.posterLink?"<img class='imdbImage' src='imdbImage.PHP?url=" + item.posterLink + "' />":"") + "<span class='imdbTitle'>" + item.movieName + "</span>" + "<div class='clear'></div></a>" )
                    .appendTo( ul );
                };
        }
  });

$('#btnMove').on('click',function (e) {
      popupCenter("movieBytitle.PHP","_blank","400","400");
});
</script>

这是movieBytitle.PHP：

<body>
<div id= "field"
</div>
 <script type="text/javascript">
  var selected = parent.window.opener.selected; 
 $.ajax({
   url: 'childfilm.PHP',datatype: "json",data:{p:selected},success: function(response) {     
         $("#field").html(response);
     }
  });
</script>
</body>

这是childfilm.PHP：

<?PHP
 if(isset($_GET['p']) && !empty($_GET['p'])){
  try{ 
    include('imdbConnection.PHP');
    $sql = $conn->prepare("SELECT disTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

    while($row = $sql->fetch(PDO::FETCH_ASSOC)){
       $option = '<a href=movie.PHP?title="' . $row['movieName'] . '">' . $row['movieName'] . '</a><br />';
       $html .= $option;

       }

    } catch(PDOException $e){
           echo 'ERROR: ' . $e->getMessage();
       }
   echo $html; 
   exit;
 }
?>

更新：

这是新的childfilm.PHP(感谢@ghost帮助)：

if(isset($_GET['p']) && !empty($_GET['p'])){
    include('imdbConnection.PHP');
    $sql = $conn->prepare("SELECT disTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));
}
?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?PHP while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img class='imdbImage' src='imdbImage.PHP?url="<?PHP echo $row['posterLink'];?>'</td>
        <td><a href="movie.PHP?title=<?PHP echo urlencode($row['movieName']); ?>"><?PHP echo $row['movieName']; ?></a></td>

    </tr>
    <?PHP endwhile; ?>
</table>

这是imdbImage.PHP：

<?PHP
header("Content-type: image/jpeg");
$url = rawurldecode($_REQUEST['url']);
echo file_get_contents($url);
?>

新问题：

这是结果(仍然,图像没有正确显示)：

解决方法

如果您已经在表格中获得了这些信息,那么只需将其包含在提取中并以表格形式呈现：

<?PHP
if(isset($_GET['p']) && !empty($_GET['p'])){

    include('imdbConnection.PHP');

    $sql = $conn->prepare("SELECT disTINCT movieName FROM films WHERE movieName LIKE :p");
    $sql->execute(array(':p' => '%'.$_GET['p'].'%'));

}

?>

<table>
    <tr>
        <th></th>
        <th>Title</th>
        <th>Year</th>
        <th>Genre</th>
    </tr>
    <?PHP while($row = $sql->fetch(PDO::FETCH_ASSOC)): ?>
    <tr>
        <td><img src="path/to/images/<?PHP echo $row['filename']; ?>" alt="" /></td>
        <td><a href="movie.PHP?title=<?PHP echo urlencode($row['movieName']); ?>"><?PHP echo $row['movieName']; ?></a></td>
        <td><?PHP echo $row['year']; ?></td>
        <td><?PHP echo $row['genre']; ?></td>
    </tr>
    <?PHP endwhile; ?>
</table>

javascript – 将图像与链接集成

解决方法

相关文章