Question

我有一个网站，我需要更新状态。就像飞行一样，你正在起飞，巡航或着陆。我希望能够刷新状态，而不让我的观众拥有并重新加载整个页面。我知道有一种方法可以使用AJAX和jQuery，但我对它的工作方式一无所知。我也不希望他们拥有并点击一个按钮。如果有人知道如何做到这一点我非常感激！

Answer 1

一般来说，如果你不知道某些事情是如何起作用的，那就找一个你可以学习的例子。

对于此问题，请考虑 this DEMO

您可以使用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  
});

尝试了解其工作原理，然后尝试复制它。祝你好运。

您可以找到相应的教程 HERE

更新

现在，以下事件启动了ajax load函数：

$("#loadbasic").click(function(){
        $("#result").html(ajax_load).load(loadUrl);
    });

您也可以定期执行此操作：How to fire AJAX request Periodically?

(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);
    }
  });
})();

我为你做了一个这个实现的演示 HERE 。在此演示中，每2秒（setTimeout(worker, 2000);）更新一次内容。

您也可以立即加载数据：

$("#result").html(ajax_load).load(loadUrl);

其中 THIS 对应的演示。

Answer 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 中更新。

Answer 3

我想您首先要了解ajax，试试这个：Ajax Tutorial

如果你想知道ajax是如何工作的，那么直接使用jQuery并不是一个好方法。我支持学习向服务器发送ajax请求的本地方式，请参阅XMLHttpRequest：

var xhr = new XMLHttpReuqest();
xhr.open("GET", "http://some.com");

xhr.onreadystatechange = handler; // do something here...
xhr.send();

Answer 4

假设您要在网页上显示一些实时Feed内容（例如 livefeed.txt ），而无需刷新页面，则以下已简化 >示例适合您。

在下面的 html文件中，实时数据在ID为“ liveData” 的 div 元素上进行了更新。 >

index.html

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

在 autoUpdate.js 下面，使用 XMLHttpRequest 对象读取实时数据，并每1秒更新一次 html div 元素。为了更好的理解，我对大多数代码都给出了注释。

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）。

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

4 个答案:

更新