更新页面上的数据而不刷新

php jquery ajax refresh

2022-08-30 12:15:54

我有一个网站，我需要更新状态。就像航班一样，您正在离开，巡航或降落。我希望能够在不让查看器拥有和重新加载整个页面的情况下刷新状态。我知道有一种方法可以用AJAX和jQuery做到这一点，但我对它是如何工作的没有任何了解。我也不希望他们拥有并点击一个按钮。如果有人知道这将如何完成，我非常感谢！

答案 1

这通常使用称为 AJAX 的技术来实现。此技术以异步方式（在后台）加载数据，因此无需重新加载页面即可更新内容。

实现 AJAX 的最简单方法是使用 jQuery load（） 方法。此方法提供了一种从 Web 服务器异步加载数据并将返回的 HTML 放入所选元素的简单方法。此方法的基本语法是：其中参数为：$(selector).load(url, data, complete);

selector要将数据加载到的现有 HTML 元素
url包含请求发送到的 URL 的字符串
data（可选）随请求一起发送到服务器的普通对象或字符串
complete（可选）请求完成时执行的回调函数

必需的 URL 参数指定要加载的文件的 URL。可选数据参数允许您指定与请求一起发送到 Web 服务器的数据（即.key/值对）。可选的完整参数可用于引用回调函数。为每个选定元素触发一次回调。

可视化：

visualization

使用的简单示例，其中我们在按下按钮时动态加载数据：load()

演示

// no need to specify document ready
$(function(){
    
    // optional: don't cache ajax to force the content to be fresh
    $.ajaxSetup ({
        cache: false
    });

    // specify loading spinner
    var spinner = "<img src='http://i.imgur.com/pKopwXp.gif' alt='loading...' />";
    
    // specify the server/url you want to load data from
    var url = "http://fiddle.jshell.net/dvb0wpLs/show/";
    
    // on click, load the data dynamically into the #result div
    $("#loadbasic").click(function(){
        $("#result").html(spinner).load(url);
    });

});

如果你不想使用jQuery库，你也可以使用普通的Javascript。以这种方式加载内容稍微困难一些。这是一个如何仅使用javascript执行此操作的示例。

要了解有关 AJAX 的更多信息，可以查看 https://www.w3schools.com/xml/ajax_intro.asp

答案 2

假设您希望在网页上显示一些实时源内容（例如 livefeed.txt），而无需任何页面刷新，那么以下简化示例适合您。

在下面的 html 文件中，实时数据在 id “liveData” 的 div 元素上更新

索引.html

<!DOCTYPE html>
<html>
<head>
    <title>Live Update</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="autoUpdate.js"></script>
</head>
<div id="liveData">
    <p>Loading Data...</p>
</div>
</body>
</html>

在 autoUpdate 下方.js使用 XMLHttpRequest 对象读取实时数据，并每隔 1 秒更新一次 html div 元素。为了更好地理解，我对代码的大部分内容进行了评论。

自动更新.js

window.addEventListener('load', function()
{
    var xhr = null;

    getXmlHttpRequestObject = function()
    {
        if(!xhr)
        {               
            // Create a new XMLHttpRequest object 
            xhr = new XMLHttpRequest();
        }
        return xhr;
    };

    updateLiveData = function()
    {
        var now = new Date();
        // Date string is appended as a query with live data 
        // for not to use the cached version 
        var url = 'livefeed.txt?' + now.getTime();
        xhr = getXmlHttpRequestObject();
        xhr.onreadystatechange = evenHandler;
        // asynchronous requests
        xhr.open("GET", url, true);
        // Send the request over the network
        xhr.send(null);
    };

    updateLiveData();

    function evenHandler()
    {
        // Check response is ready or not
        if(xhr.readyState == 4 && xhr.status == 200)
        {
            dataDiv = document.getElementById('liveData');
            // Set current data text
            dataDiv.innerHTML = xhr.responseText;
            // Update the live data every 1 sec
            setTimeout(updateLiveData(), 1000);
        }
    }
});

出于测试目的：只需在实时源中编写一些内容.txt - 您将在索引.html中更新相同的内容，而无需任何刷新。

实时馈送.txt

Hello
World
blah..
blah..

注意：您需要在Web服务器上运行上述代码（例如：http://localhost:1234/index.html），而不是作为客户端html文件（例如：file:///C:/index.html）。