0

だから私はajaxを手に入れようとしていて、ユーザーが画像を押すとajaxがクッキーを設定する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, '/');
?>
4

3 に答える 3

1

何をしようとしているのかよくわかりませんでしたが、ajax リクエストが終了したときに何かを行うには、次のようにコールバック関数を作成する必要があります。

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

関数内では img タグを操作して内容を変更する必要があります。

于 2013-10-28T17:41:31.047 に答える
0

すでに確認されているように、DOM を更新するものが何もないため、コードが機能しません。DOM を手動で (jQuery を使用して) 更新するか、テンプレートを再レンダリングする必要があります。ここではテンプレートを使用していないため、他の人が示唆しているように、DOM を jQuery で手動で更新する必要があります。

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 のコードはローカルでは機能しますが、要求されたリソースが利用できないために XML 要求が失敗するため、fiddle では機能しません。ただし、done() コールバックではなく error() コールバックに応答したため、次の jsfiddle は機能します。

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. 画像をクリックすると、XHR リクエストが /scripts/upvote.php に送信されます。
  5. upvote.php はユーザーの Cookie を変更します。この時点でユーザーがページを手動で更新すると、正しい img である up.png が表示されます。ただし、更新しない場合は、変更を反映するために DOM を手動で更新する必要があります。
  6. XHR リクエストが成功した場合、img の src 属性を変更して「up.png」に設定します。また、必要がなくなったため、img のクリック アクションの監視も停止します。
  7. XHR リクエストが失敗した場合、コンソールにメッセージを出力します。
于 2013-11-01T12:48:51.150 に答える