问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在不刷新的情况下更新页面上的数据

社区维基
1
新手上路，请多包涵

我有一个需要更新状态的网站。就像飞行一样，您要离开、巡航或降落。我希望能够在不让我的观众拥有并重新加载整个页面的情况下刷新状态。我知道有一种方法可以使用 AJAX 和 jQuery 来实现，但我对它的工作原理一无所知。我也不希望他们拥有并单击一个按钮。如果有人知道如何做到这一点，我将不胜感激！

原文由 Gidimotje 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译phpjqueryajaxrefresh
阅读 979
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这通常是通过称为 AJAX 的技术实现的。这种技术异步加载数据（在后台），因此它可以更新您的内容而无需重新加载页面。

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

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

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

可视化：

可视化

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

原文由 Jean-Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

假设你想在你的网页上显示一些 实时提要内容（比如 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);
        }
    }
});

出于测试目的：只需在 livefeed.txt 中写一些东西 - 您将在 index.html 中获得相同的更新而无需任何刷新。

直播.txt

 Hello
World
blah..
blah..

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

原文由 SridharKritha 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏