好吧，我认为用下图解释我的问题可能更容易:
从图片中可以看出，如果用户选择“按标题”，将出现一个文本框，用户可以在其中输入电影标题(我还为此文本框使用了 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 - 将图像与链接集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26887128/