リフレッシュのないAjax ready/notreadyボタン

Question

私はかなり新しいコーディングですが、途中で学習しています。私はphp等で自分のボタンを作ることができましたが、これは非常に面倒なページをリフレッシュします。

私は見て、Ajaxを知りました。私は特定のページパーツを自動更新するようにデータを管理し、Ready/Not Readyからテストを変更し、それを処理してデータベースを更新するPHPファイルにデータを送信するボタンを作りました。

しかし、私は1つの問題に直面しています。たとえば、ユーザーがボタンを使用してデータベース値が「レディ」に設定されている場合などです。それらがページをリフレッシュする場合。またはボタンを閉じて戻ると、デフォルト値と表示されます。の準備ができていますが、データベースにはReadyが設定されています。

最終的な目標は、ユーザーが自分のステータスをゲームの試合の準備ができているかどうかに設定できることです。情報が他のユーザーに表示されるようにデータベースが更新されます。

私はコードを混乱させると申し訳ありませんが、私がインターネット上の例を取り上げて以来、非常によく理解できると思います。

var xmlHttp_five = AJAX(); 
function ajaxFunction(pid) { 
    var getdate = new Date(); //Used to prevent caching during ajax call 
    if(xmlHttp_five) { 
    var txtname = document.getElementById("txtname"); 
    xmlHttp_five.open("POST","includes/gather_buttons.php",true); //calling testing.php using POST method 
    xmlHttp_five.onreadystatechange = handleServerResponse; 
    xmlHttp_five.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    xmlHttp_five.send("txtname=" + txtname.value + "&pid=" + pid); //Posting txtname to PHP File 
    } 
} 

function handleServerResponse() { 
    if (xmlHttp_five.readyState == 4) { 
    if(xmlHttp_five.status == 200) { 

     if (document.myForm.button1.value == "Ready") { 
      document.myForm.button1.value = "Not Ready"; 
      document.myForm.txtname.value = "Waiting"; 
     } else { 
      document.myForm.button1.value = "Ready"; 
      document.myForm.txtname.value = "Ready"; 
     } 
    } 
    else { 
     alert("Error during AJAX call. Please try again"); 
    } 
    } 
} 

と

<form name='myForm'> 
    <input type='hidden' name='txtname' id='txtname' value='Ready'/> 
    <input type='button' class='button2' id='button1' value='Ready' onclick='ajaxFunction($pid);' /> 
</form> 

以下のフォーム私はより多くの情報を与える必要がある場合、私はここにこれを投稿することになっておりません場合は申し訳ありませんが、そう言ってください。

ありがとうございます。

敬具、

ヨハン

Answer 1

あなたのフォームは、サーバー側のスクリプトによって生成されなければなりません。したがって、ユーザーがページをリフレッシュすると、データベースから実際のデータが取得されます。

サーバーサイドスクリプトでフォームを生成できない場合は、プリローダーを使用する必要があります。ボタンの値は、最初は「読み込み中...」、スクリプトはAjaxで値を要求する必要があります。