0

因此，我试图掌握 ajax，并制作了一个简单的脚本，当用户按下图像时，ajax 会打开设置 cookie 的 php 页面，并且索引页面上的图像会更新。但不知何故，它不起作用。

索引.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>

赞成票.php

<?php
    $expire=time()+60*60*24*365*10;
    setcookie('xmltest', "1", $expire, '/');
?>
4

3 回答 3

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>

只是一个建议，在使用 cookie 时，永远不要像这样直接阅读它们：

if ($_COOKIE['xmltest'] == 1) ...

因为这会触发Undefined index: xmltest in ...通知。首先检查索引是否存在isset()or empty()：

if (isset($_COOKIE['xmltest']) && $_COOKIE['xmltest'] == 1) ...

或者在这种情况下，由于 cookie 是布尔值，您也可以这样做：

if (!empty($_COOKIE['xmltest'])) ...
于 2013-10-28T17:40:46.210 回答
1

我不太了解您要做什么，但是您需要创建一个回调函数来在ajax请求结束时执行某些操作，请执行以下操作：

xmlhttp.onreadystatechange=function()
{
  //  do something here
}

在函数内部，您必须操作 img 标签来更改其内容。

于 2013-10-28T17:41:31.047 回答
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 中分离出来——这是一件好事。

http://jsfiddle.net/sW455/2/

上面 jsfiddle 中的代码将在本地工作，但在 fiddle 中不起作用，因为 XML 请求将由于请求的资源不可用而失败。但是，以下 jsfiddle 确实有效，因为我已经响应了 error() 回调，而不是 done() 回调。

http://jsfiddle.net/nq57m/2/

在上面的小提琴中，如果您使用开发工具检查图像的 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>

以下是该过程的细分：

  1. 用户访问此页面
  2. 服务器端代码 (PHP) 根据用户的 cookie 呈现初始 HTML
  3. 用户通过单击图像与页面交互
  4. 单击图像后，我们向 /scripts/upvote.php 发送 XHR 请求
  5. upvote.php 修改用户的 cookie。如果用户此时手动刷新他们的页面，他们将看到正确的 img，up.png。但是，如果它们不刷新，则需要手动更新 DOM 以反映更改。
  6. 如果 XHR 请求成功，我们更改 img 的 src 属性并将其设置为“up.png”。我们也停止观察 img 的点击动作，因为我们不再需要它。
  7. 如果 XHR 请求失败，我们会向控制台输出一条消息。
于 2013-11-01T12:48:51.150 回答