这里是业余新手,所以提前感谢任何帮助。我要疯了。
我试图开发一个jquery脚本通过php搜索mysql存储在我的数据库中的图像。用户将在输入字段中键入一个单词。在该单词中输入的每个字符返回一个单独的艺术品(例如,输入f-l-o-w-e-r,得到六个相应的图像)。在一些帮助下,我得到了php脚本与常规html表单一起工作。但现在,我已经尝试添加jquery部分,一切连接OK,似乎运行我想要的方式,但不是图像,我只得到空框与"破碎的图像"图标。
我在下面附上find.php页面的基本脚本。之后是使用jquery的index.php页面。如有任何意见,不胜感激。
$lettertype = str_split($lettertype);
$lettertype = "'" . implode("','", $lettertype) . "'";
$query = "SELECT * FROM Photos WHERE letter IN ($lettertype)";
$result = mysqli_query($cxn, $query)
or die ("No good");
$alpharray = array();
while($row = mysqli_fetch_assoc($result))
{
$alpharray[$row['search_term']][] = $row; //
}
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}
然后是index.php。
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>
<title>Welcome!</title>
</head>
<body>
<h1>Search here</h1>
<form id="searchform" method="post">
<div>
<label for="search_term">Search</label>
<input type="text" name="search_term" id="search_term" />
<input type="submit" value="search" id="search_button" />
</div>
</form>
<div id="search_results"></div>
</body>
</html>
<img>
的src属性总是相对于浏览器看到的实际页面的URL。例子:www.example.com/test/index.php
包含<img>
, src=../image.jpg
表示浏览器试图加载www.example.com/image.jpg
因此,如果您的index.php位于/
(例如www.example.com/index.php),很可能在../delete
中引用图像将不起作用,因为服务器不允许访问其webroot之外的东西。
无论如何,如果您想访问父目录,您需要输入../
(不仅仅是..
)
对于您的脚本,这意味着:
foreach(str_split($_POST['search_term']) as $alpha)
{
echo "<a href='link.com'>
<img src='../delete/images/{$alpharray[$alpha][0]['imagePath']}' width='100' height='140'/></a>";
}