javascript - 如何在 PHP 上制作 AJAX wȯrk？

Question

我是 AJAX 新手，目前正在尝试在单击“显示服务器时间”按钮后获得一个简单的 PHP-AJAX 来显示服务器时间。但是我点击它后它没有显示时间。谁能帮我？这是 show_server_time.php 代码：

<?php include('header.html'); ?><br>
<div class="container">
  <div class="card">
    <div class="card-header">
      Ajax Server Time
    </div>
    <div class="card-body">
      <button class="btn btn-success" onclick="get_server_time()">
        Show Server Time
      </button>
      <br><br>
      <div id='showtime'></div>
    </div>
  </div>
</div>
<br>
<script src="ajax.js"></script>

ajax.js：

function getXMLHTTPRequest(){
  if(window.XMLHTTPRequest){
    //for modern browsers
    return new XMLHttpRequest();
  }else{
    //for old IE browsers
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function get_server_time(){
  var xmlhttp = getXMLHTTPRequest();
  var page = 'get_server_time.php';
  xmlhttp.open("GET",page,true);
  xmlhttp.onreadystatechange = function() {
    document.getElementById('showtime').innerHTML = '<img src = ajax_loader.png>';
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById('showtime').innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}

这是 get_server_time.php：

<?php
echo date('H:i:s');
?>

标签： javascriptphpjqueryajax

Answer 1

<div class="container">
  <div class="card">
    <div class="card-header">
      Ajax Server Time
    </div>
    <div class="card-body">
      <button class="btn btn-success" onclick="get_server_time()">
        Show Server Time
      </button>
      <br><br>
      <div id='showtime'></div>
    </div>
  </div>
</div>
<br>
<script>
function get_server_time(){
  var xmlhttp =new XMLHttpRequest();
  var page = 'get_server_time.php';
  xmlhttp.open("GET",page,true);
  xmlhttp.onreadystatechange = function() {
    document.getElementById('showtime').innerHTML = '<img src = ajax_loader.png>';
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById('showtime').innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}
</script>

它的工作原理如上。

https://www.w3schools.com/js/js_ajax_intro.asp