没有刷新的 Ajax 就绪/未就绪按钮

Question

我对编码非常陌生，但我一直在学习。我设法在 php 等中制作了我的按钮，但当然这会刷新页面，这使它非常烦人。

我环顾四周，了解了 Ajax。我设法让某些页面部分自动刷新它的数据，我还设法制作了一个按钮，将它的测试从 Ready / Not Ready 更改并将数据发送到处理它并更新数据库的 php 文件。

但是我面临一个问题。例如，如果用户有时使用按钮并且数据库值设置为就绪。如果他们刷新页面。或关闭并返回按钮会说它是默认值Ready，而数据库已经将它设置为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 请求该值。