PHP JavaScript刷新某些Divs

时间:2018-10-28 13:42:45

标签: javascript php jquery html css

我要执行以下操作:

<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做到这一点?谢谢...

2 个答案:

答案 0 :(得分:1)

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

但是在我们开始之前,让我们先了解一下AjaxJSON

什么是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()?

答案 1 :(得分:0)

使用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>

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