我确实想使用Ajax发送HTTP请求，并在用户单击链接时接收响应（来自数据库的图片链接）。我在Ajax函数调用中设置的参数是单击链接的类的值，该链接是我通过PHP中的循环获得的。我觉得这有点令人困惑。。这是我的代码
Ajax函数调用：index.php
<script>
var current = 0;
function showPics(str) {
if (str=="") {
document.getElementById("displayPic").innerHTML="";
return;
}
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("displayPic").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getpics.php?q="+str,true);
xmlhttp.send();
}
</script>
getpics.php
<?php
$q = $_GET["q"];
$host = "127.0.0.1";
$db = "pcqsp";
$user = "root";
$pass = "";
try {
$conn = new PDO("mysql:host=$host; dbname=$db", $user, $pass);
} catch(Exception $e) {
die('Erreur : ' . $e->getMessage());
}
$req = $conn->prepare('SELECT * FROM screenshot WHERE id_work = :id_work');
$req->execute(array('id_work' => $q));
while ($data = $req->fetch())
{
echo "<img class='popup_pics' src='" . $data['link_screenshot'] . "' />";
}
$req->closeCursor();
?>
对index.php的Ajax调用
<?php
// Open a database connection
$host = "127.0.0.1";
$db = "pcqsp";
$user = "root";
$pass = "";
try {
$conn = new PDO("mysql:host=$host; dbname=$db", $user, $pass);
} catch(Exception $e) {
die('Erreur : ' . $e->getMessage());
}
$req = $conn -> query('SELECT * FROM work');
$i = 1;
while ($data = $req -> fetch()) { ?>
<div class="image-even">
<img src="<?php echo $data['cover_work'] ?>" width="421" height="590" />
</div>
<div class="more">
// Here's the problem
<a class="<?php echo $i ?>-popup" href="#displayPics">More details</a>
</div>
<?php
$i ++;
}
?>
<script type="text/javascript">
$current = 0;
$('a[class*="popup"]').click(function(){
current = $(this).attr('class').charAt(0);
showPics(current); //Ajax function call
});
</script>
当我没有通过PHP进行循环时（我是静态地写：1-popup、2-popup等。一切都在工作。
请问你有解决这个问题的办法吗？非常感谢。
您的jquery调用不是在window.ready事件内构建的。尝试通过执行以下操作将其包含在window.ready事件中。
<script type="text/javascript">
$current = 0;
$(document).ready(function (e) {
$('a[class*="popup"]').click(function(){
current = $(this).attr('class').charAt(0);
showPics(current); //Ajax function call
});
});
</script>
您的javascript可能是在dom准备就绪之前执行的。