我要执行以下操作:
<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做到这一点?谢谢...
答案 0 :(得分: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>
<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 :(得分: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>
,并且不要同时发出太多请求。 祝你好运。