jQuery＋PHPでAjaxな通信をするための実装メモ

新サイトへ移転しました
約３秒後に自動的にリダイレクトします。

けっこう悩んだので、何をした時にダメで、どうしたらうまく動作したかをメモ。
(参考サイト)
jQuery.ajaxで簡単に非同期通信 - 背負い投げとENTER_FRAME

やりたいこと

あるページで「次へ」ボタンを押したら、そのページで表示されている画像を更新される、というページの作成。

注意点

サーバのデータベースとやりとりをして得た値を使用して要素を更新する処理を行いたい場合は、$.ajax()内successの項に書きましょう。

失敗例

javascript側で、Ajaxでの通信部分を以下のように実装していたが、反応しなかった。数カ所にデバッグ用のalert()を用意して確認したところ、理由がわかった。それは$.ajax()の外の方が先に実行されるからだった。

HTML(image_view.html)

<head>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="question_reply_form.js"></script>
</head>
<body>
  <div id="image_number">1枚目</div>
  <img id="image" src="image1.png" width="800" border="1">
  <button id="next_button">次へ</button>
</body>

javascript(image_view.js)

$(document).ready(function() {
  $(".next_button").on("click", function() {
    var image_name = “”;
    $.ajax({
      url = "get_image_name.php",
      type: "POST",
      data: {"next_id" : "2"},    // 本当は動的にidを設定したいが、とりあえず今回は手動で。
      success: function(name) {
        alert("success1 :" + image_name);    // 2番目に実行される(image_name=""の状態)
        image_name = name;
        alert("success2 :" + image_name);    // 3番目に実行される(image_name="image2.png"の状態)
      }
    });
    alert(“image_name = “ + image_name);    // 1番目に実行される(image_name=""の状態)
    var image_tag = $("<img id=‘image' src='" + image_name + "'");
    $("#image").remove();    // 古い画像の削除
    $("#image_number").after(image_tag);    // 新しい画像の追加
  });
});

php(image_view.php)

<? php
$id = $_POST["id"];
$image_name = "image2.png";  // データベースから次のidの画像名を取得して格納(コード省略)
echo $image_name;
?>

成功例

変えたのはjavascriptのみなので、そちらのみ示す。

$(document).ready(function() {
  $(".next_button").on("click", function() {
    var image_name = “”;
    $.ajax({
      url = "get_image_name.php",
      type: "POST",
      data: {"next_id" : "2"},    // 本当は動的にidを設定したいが、とりあえず今回は手動で。
      success: function(name) {
        alert("success1 :" + image_name);    // 2番目に実行される(image_name=""の状態)
        image_name = name;
        alert("success2 :" + image_name);    // 3番目に実行される(image_name="image2.png"の状態)
        var image_tag = $("<img id='image' src='" + image_name + "'");    // add
        $("#image").remove();    // 古い画像の削除                        // add
        $("#image_number").after(image_tag);    // 新しい画像の追加       // add
      }
    });
    alert(“image_name = “ + image_name);    // 1番目に実行される(image_name=""の状態)
    // delete : var image_tag = $("<img id=‘image' src='" + image_name + "'");
    // remove : $("#image").remove();    // 古い画像の削除
    // remove : $("#image_number").after(image_tag);    // 新しい画像の追加
  });
});