我有一个网站，我需要更新状态。就像飞行一样，你要出发、巡航或着陆。我想能够刷新状态，而不必让我的观众有和重新加载整个页面。我知道有一种方法可以用ajax和jquery来实现，但是我不知道它是如何工作的。我也不希望他们有和点击按钮。如果有人知道该怎么做，我非常感激！
vlju58qv1#
一般来说，如果你不知道某件事是如何运作的，那就找一个你可以从中学习的例子。对于这个问题，考虑这个演示您可以看到，使用jquery很容易完成用ajax加载内容：
$(function(){ // don't cache ajax or content won't be fresh $.ajaxSetup ({ cache: false }); var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />"; // load() functions var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/"; $("#loadbasic").click(function(){ $("#result").html(ajax_load).load(loadUrl); });// end });
$(function(){
// don't cache ajax or content won't be fresh
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://automobiles.honda.com/images/current-offers/small-loading.gif' alt='loading...' />";
// load() functions
var loadUrl = "http://fiddle.jshell.net/deborah/pkmvD/show/";
$("#loadbasic").click(function(){
$("#result").html(ajax_load).load(loadUrl);
// end
试着理解它是如何工作的，然后试着复制它。祝你好运。你可以在这里找到相应的教程
现在，下面的事件启动ajax load 功能：
load
$("#loadbasic").click(function(){ $("#result").html(ajax_load).load(loadUrl); });
您还可以定期这样做：如何定期激发ajax请求？
(function worker() { $.ajax({ url: 'ajax/test.html', success: function(data) { $('.result').html(data); }, complete: function() { // Schedule the next request when the current one's complete setTimeout(worker, 5000); } });})();
(function worker() {
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
},
complete: function() {
// Schedule the next request when the current one's complete
setTimeout(worker, 5000);
}
})();
我在这里为您演示了这个实现。在这个演示中，每2秒( setTimeout(worker, 2000); )内容已更新。您也可以立即加载数据：
setTimeout(worker, 2000);
有相应的演示。
oo7oh9g92#
您可以从jquery官方网站上了解jquery ajax：https://api.jquery.com/jquery.ajax/如果你不想使用任何点击事件，那么你可以设置定时定期更新。下面的代码可能会帮助您只是一个例子。
function update() { $.get("response.php", function(data) { $("#some_div").html(data); window.setTimeout(update, 10000); });}
function update() {
$.get("response.php", function(data) {
$("#some_div").html(data);
window.setTimeout(update, 10000);
上述函数每10秒调用一次，从response.php获取内容并在中更新 #some_div .
#some_div
hkmswyz63#
假设您希望在网页上显示一些实时提要内容（比如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>
<!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秒更新一次htmldiv元素。为了更好地理解代码的大部分内容，我已经给出了注解。自动更新.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); } }});
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文件
HelloWorldblah..blah..
Hello
World
blah..
注意：您需要在web服务器上运行上述代码（例如：http://localhost：1234/index.html）不作为客户端html文件（例如：file:///c:/index.html）。
lhcgjxsq4#
我想你会想学的 ajax 首先，试试这个：ajax教程如果您想知道ajax是如何工作的，那么直接使用jquery并不是一种好方法。我支持学习本机方式向服务器发送ajax请求，请看一些关于 XMLHttpRequest :
ajax
XMLHttpRequest
var xhr = new XMLHttpReuqest();xhr.open("GET", "http://some.com");xhr.onreadystatechange = handler; // do something here...xhr.send();
var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");
xhr.onreadystatechange = handler; // do something here...
xhr.send();
4条答案
按热度按时间vlju58qv1#
一般来说，如果你不知道某件事是如何运作的，那就找一个你可以从中学习的例子。
对于这个问题，考虑这个演示
您可以看到，使用jquery很容易完成用ajax加载内容：
试着理解它是如何工作的，然后试着复制它。祝你好运。
你可以在这里找到相应的教程
更新
现在，下面的事件启动ajax
load功能：您还可以定期这样做：如何定期激发ajax请求？
我在这里为您演示了这个实现。在这个演示中，每2秒(
setTimeout(worker, 2000);)内容已更新。您也可以立即加载数据：
有相应的演示。
oo7oh9g92#
您可以从jquery官方网站上了解jquery ajax：https://api.jquery.com/jquery.ajax/
如果你不想使用任何点击事件，那么你可以设置定时定期更新。
下面的代码可能会帮助您只是一个例子。
上述函数每10秒调用一次，从response.php获取内容并在中更新
#some_div.hkmswyz63#
假设您希望在网页上显示一些实时提要内容（比如livefeed.txt），而不进行任何页面刷新，那么下面的简化示例就是为您准备的。
在下面的html文件中，id“livedata”的div元素上的实时数据将得到更新
索引.html
下面autoupdate.js使用xmlhttprequest对象读取实时数据，并每隔1秒更新一次htmldiv元素。为了更好地理解代码的大部分内容，我已经给出了注解。
自动更新.js
出于测试目的：只需在livefeed.txt中编写一些东西-您将在index.html中得到相同的更新，而无需任何刷新。
livefeed.txt文件
注意：您需要在web服务器上运行上述代码（例如：http://localhost：1234/index.html）不作为客户端html文件（例如：file:///c:/index.html）。
lhcgjxsq4#
我想你会想学的
ajax首先，试试这个：ajax教程如果您想知道ajax是如何工作的，那么直接使用jquery并不是一种好方法。我支持学习本机方式向服务器发送ajax请求，请看一些关于
XMLHttpRequest: