更新页面上的数据而不刷新
Posted
技术标签:
【中文标题】更新页面上的数据而不刷新【英文标题】：Update data on a page without refreshing 【发布时间】：2014-04-29 22:10:39 【问题描述】：我有一个需要更新状态的网站。 就像飞行一样，您正在起飞、巡航或降落。 我希望能够在不让我的观众拥有并重新加载整个页面的情况下刷新状态。我知道有一种使用 AJAX 和 jQuery 的方法，但我不知道它是如何工作的。我也不希望他们拥有并单击按钮。 如果有人知道该怎么做，我将不胜感激！
【问题讨论】：
您好，欢迎来到 SO。它不像 elancer.com 那样工作，所以你需要先找到一些代码，然后提出具体问题 【参考方案1】：这通常通过称为AJAX 的技术来实现。此技术异步加载数据（在后台），因此无需重新加载页面即可更新您的内容。
实现 AJAX 的最简单方法是使用 jQuery load() method。此方法提供了一种从 Web 服务器异步加载数据并将返回的 html 放入所选元素的简单方法。此方法的基本语法为：$(selector).load(url, data, complete); 其中参数为：
selector 要将数据加载到的现有 HTML 元素
url 包含请求发送到的 URL 的字符串
data（可选）随请求发送到服务器的普通对象或字符串
complete（可选）请求完成时执行的回调函数
必需的 URL 参数指定要加载的文件的 URL。 可选的 data 参数允许您指定与请求一起发送到 Web 服务器的数据（即键/值对）。可选的完整参数可用于引用回调函数。每个选定元素都会触发一次回调。
可视化：
一个使用load()的简单示例，我们在按下按钮时动态加载数据：
DEMO
// 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。以这种方式加载内容稍微困难一些。 Here is an example 仅使用 javascript 即可。
要了解更多关于 AJAX 的信息，可以查看https://www.w3schools.com/xml/ajax_intro.asp
【讨论】：
嗨！谢谢你的建议！但在你的例子中，我也需要点击一个按钮，有没有一种方法可以在不点击的情况下更新数据？ @gidimotje 是的，在这种情况下，您只需删除click() 部分，代码将直接运行。您还可以使用简单的setTimeout() 语句在 x 秒后加载内容。【参考方案2】：
您可以从官方 jQuery 网站了解 jQuery Ajax： https://api.jquery.com/jQuery.ajax/
如果你不想使用任何点击事件，那么你可以设置定时更新。
下面的代码可能只是一个例子。
function update()
$.get("response.php", function(data)
$("#some_div").html(data);
window.setTimeout(update, 10000);
);
上面的函数会在每 10 秒后调用一次，并从 response.php 中获取内容并在 #some_div 中更新。
【讨论】：
此链接可能对您有更多帮助：9lessons.info/2009/07/…【参考方案3】：如果你想知道ajax是如何工作的，直接使用jQuery并不是一个好方法。我支持学习向服务器发送ajax请求的原生方式，见XMLHttpRequest：
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://some.com");
xhr.onreadystatechange = function () ; // do something here...
xhr.send();
【讨论】：
【参考方案4】：假设您想在您的网页上显示一些 live feed 内容（比如 livefeed.txt）而不进行任何页面刷新，那么以下 简化 示例适合您。
在下面的 html 文件中，live data 会在 id "liveData" 的 div 元素上更新>
index.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 元素。为了更好地理解，我在大部分代码上都给出了 cmets。
autoUpdate.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 中获得相同的更新而无需任何刷新。
livefeed.txt
Hello
World
blah..
blah..
注意：您需要在web服务器（例如：http://localhost:1234/index.html）上运行上述代码，而不是作为客户端html文件（例如：file:///C:/index.html）。
【讨论】：
以上是关于更新页面上的数据而不刷新的主要内容，如果未能解决你的问题，请参考以下文章