所以我试图抓住ajax并制作了一个简单的脚本，当用户按下图像时，ajax会打开设置cookie的php页面，索引页面上的图像会更新。但不知怎的，它不起作用。
的index.php：
<html>
<head>
<title>AJAX request</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
</head>
<body>
<script>
function upvote()
{
xmlhttp.open("GET","scripts/upvote.php",true);
xmlhttp.send();
}
</script>
<?php
if($_COOKIE['xmltest'] == 1)
{
echo "<img src='up.png' width='50px'>";
}else{
echo "<img src='neutral_up.png' width='50px' onclick='upvote();'>";
}
?>
</body>
</html>
upvote.php
<?php
$expire=time()+60*60*24*365*10;
setcookie('xmltest', "1", $expire, '/');
?>
答案 0 :(得分：2)
这对我有用（编辑）：
我正在为图像添加一个类，以便使用jQuery更轻松地操作它：
<?php
// Using empty() to check for the cookie
if (!empty($_COOKIE['xmltest']))
{
echo "<img src='up.png' width='50px'>";
}else{
// Adding a class "change-me" to the image
echo "<img class='change-me' src='neutral_up.png' width='50px' onclick='upvote();'>";
}
?>
现在为您的Ajax请求添加一个回调函数，该函数将在请求完成时调用：
<script>
function upvote()
{
$.get("scripts/upvote.php", function() {
// Update image
$('.change-me').attr('src', 'up.png');
});
}
</script>
只是一个建议，在使用cookies时，永远不要直接读取它们：
if ($_COOKIE['xmltest'] == 1) ...
因为这会触发Undefined index: xmltest in ...通知。首先检查索引是否存在isset()或empty()：
if (isset($_COOKIE['xmltest']) && $_COOKIE['xmltest'] == 1) ...
或者在这种情况下，由于cookie是一个布尔值，你也可以这样做：
if (!empty($_COOKIE['xmltest'])) ...
答案 1 :(得分：1)
我不太清楚你想要做什么，但你需要创建一个回调函数来在ajax请求结束时做某事，这样做：
xmlhttp.onreadystatechange=function()
{
// do something here
}
在函数内部，你必须操纵img标签来改变它的内容。
答案 2 :(得分：0)
正如已经确定的那样，您的代码不起作用，因为没有更新DOM - 您必须手动更新DOM（例如使用jQuery）或重新渲染模板。你没有在这里使用模板，因为其他人建议你需要用jQuery手动更新DOM。
如果jQuery已经可用，那么您不需要使用低级XMLHttpRequest对象，而是可以使用jQuery的ajax功能来提供更清晰的解决方案：
$('img').on('click', function() {
var img = $(this);
$.get('scripts/upvote.php')
.done(function() {
img.attr('src', 'up.png');
img.unbind('click');
})
.error(function() {
console.log('An error occurred');
})
});
使用此解决方案，我们也不需要使用内联JavaScript，因此我们已成功将JavaScript与HTML分离 - 这是一个很好的目标。
来自上面的jsfiddle的代码将在本地工作，但在小提琴中不起作用，因为XML请求将因请求的资源不可用而失败。然而，下面的jsfiddle确实有效，因为我已经响应了error（）回调，而不是done（）回调。
在上面的小提示中，如果使用开发工具检查图像的src，您将看到在单击图像时src属性发生变化。
通过此更新，您的代码将如下所示：
<html>
<head>
<title>AJAX request</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$('img').on('click', function() {
var img = $(this);
$.get('scripts/upvote.php')
.done(function() {
img.attr('src', 'up.png');
img.unbind('click');
})
.error(function() {
console.log('An error occurred');
});
});
</script>
</head>
<body>
<?php
if(isset($_COOKIE['xmltest']) && ($_COOKIE['xmltest'] == 1))
{
echo "<img src='up.png' width='50px'>";
}else {
echo "<img src='neutral_up.png' width='50px'>";
}
?>
</body>
</html>
以下是该流程的细分：