Question

我正在尝试构建一个非常简单的网页，它所做的就是每秒使用PHP中的随机数更新UI。我知道我需要使用AJAX但根本不熟悉它，并且无法从我所做的所有研究中弄清楚如何使用它来实现我的目标。

这是我的HTML / PHP文件：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>  
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
       $(function(){
          setInterval( function(){
              $.get("get_num.php", function(data) { 
                  $('#data').html(data);
              });
          }, 1000); 
       });
    </script>

  </head>
  <body>
     <?php include_once('get_num.php') ?>
    <div id="data"></div>
  </body>
</html>

get_num.php除了回应一个随机数之外别无其他。

知道为什么这段代码没有每秒用新号码更新我的UI？我没有正确使用AJAX吗？我在这做错了什么？任何帮助将非常感激。

Answer 1

您实际上并没有更新您的用户界面。

＆＃13;

    <!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>  
    <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript">
       $(function(){
            setInterval(function() {
                $.get("get_num.php", function(data) {
                     $('#data').html(data);
                });
            }, 1000); 
       });
    </script>

  </head>
  <body>
     <?php include_once('get_num.php') ?>
    <div id="data"></div>

  </body>
</html>

＆＃13;

Answer 2

以下代码调用get_num.php文件

setInterval(function() {
    $.get("get_num.php", function(data) {
    });
}, 1000);

您需要在行function (data) {}中添加代码来处理接收到的ajax调用数据。

这可能是这样的：

setInterval(function() {
    $.get("get_num.php", function(data) {
        console.log(data);
        $("body").html(data);
    });
}, 1000);

使用AJAX定期调用PHP

2 个答案: