完整的html示例（调用外部php）-

Question

我要执行以下操作：

<html>
    <div id="first"><?php echo time(); ?></div>
    <div id="second">My dropdown menu goes here</div>
    <div id="third"><?php echo time(); ?></div>
</html>

我有这个“ example.php”，我想要的是每隔1秒钟刷新第一和第三div和PHP代码，而无需重新加载页面并更改第二div的状态，该状态将保留下拉菜单中的选择。

因此，下拉菜单的选择应准确，当我单击并打开下拉菜单时，在第一个和第三个div发生刷新时，不得关闭该菜单。

此外，第一和第三div的刷新方法必须是同时且完全独立的过程。时间打印仅用于为我的问题提供时变值。我将在这些PHP代码中读取并打印MySQL数据库数据。

如何使用javascript做到这一点？谢谢...

Answer 1

要获得所需的结果，您需要使用Ajax和JSON。
您的PHP脚本将以json格式返回新数据，该数据将通过Ajax提取，然后替换为目标div。

但是在我们开始之前，让我们先了解一下Ajax和JSON

什么是Ajax？

Ajax是一种客户端脚本，可以与服务器/数据库进行通信，而无需回发消息或刷新整个页面。本质上，Ajax是“与服务器交换数据，并更新网页的某些部分–而无需重新加载整个页面的方法。”

什么是JSON？

JSON（JavaScript对象表示法）是一种用于结构化数据的最小可读格式。它主要用于在服务器和Web应用程序之间传输数据，以替代XML。

如何将其与脚本集成？
我们将首先定义一个名为update_data()的javascript函数，该函数从服务器获取值，然后使用获取的值更新div。

为此，我们将使用jQuery作为依赖项，并将使用它的jQuery.ajax()方法
注意 -要每秒自动调用该函数，我们还需要setInterval方法

function update_data() {
   $.ajax({
       url: 'test.php',  // Your PHP script location
       type: "GET",
       async: true, // refer to reference [1] in my answer
       success: function (data) {
           // Update the values

           $('#first').text(data.time1); // get the value of `time1` key from returned data
           // #first targets the element with id="first"

           $('#third').text(data.time2);
        }
   });
}

setInterval("update_data();", 1000);
// calls the function `update_data()` every second

示例PHP脚本-（test.php）

<?php
    if ($_SERVER['REQUEST_METHOD'] == "GET") {
        $data = Array('time1' => time(), 'time2' => time());

        // returns the data with mime type `json` instead of `html`
        header("Content-Type: application/json; charset=UTF-8");
        echo json_encode($data);  // converts array into json
    }
?>

上面的PHP脚本将返回以下JSON结构：

{
    "time1": 'value returned by first call to time()',
    "time2": 'value returned by repeated call to time()'
}

完整的html示例（调用外部php）-

<html>
    <div id="first">Print some value on page load, will be replaced by Ajax</div>
    <div id="second">My dropdown menu goes here</div>
    <div id="third">Print some value on page load, will be replaced by Ajax</div>
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function update_data() {
            $.ajax({
                url: '/test.php', // Your PHP script location
                type: "GET",
                async: true, // refer to reference [1] in my answer
                success: function(data) {
                    // Update the values

                    $('#first').text(data.time1); // get the value of `time1` key from returned data
                    // #first targets the element with id="first"

                    $('#third').text(data.time2);
                }
            });
        }

        setInterval("update_data();", 1000);
        // calls the function `update_data()` every second
    </script>
</html>

参考-
1. What does "async: false" do in jQuery.ajax()?

Answer 2

使用http://api.jquery.com/jquery.ajax/

示例：

<script>
$(function(){
  $.ajax({
  url: "first.php",
  })
  .done(function( data ) {
    if ( data ) {
      $('#first').html(data);
    }
  });
});
</script>

现在，如果您真的在池塘外游泳，我会更轻松的：

    <script>
var t=0;
function fetchFirst()
{
     $.ajax({
      url: "first.php",
      })
      .done(function( data ) {
        if ( data ) {
          $('#first').html(data);
         clearTimeout(t);
        }
      });
}
    $(function(){
      t=setTimeout(fetchFirst, 1000)
    });
    </script>

现在，您可以从此快速入门中获取其余信息。请记住在

之前将jquery嵌入

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

，并且不要同时发出太多请求。祝你好运。

PHP JavaScript刷新某些Divs

2 个答案:

完整的html示例（调用外部php）-