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

pobjuy32 于 2021-06-18 发布在 Mysql

关注(0)|答案(4)|浏览(477)

我有一个网站，我需要更新状态。就像飞行一样，你要出发、巡航或着陆。我想能够刷新状态，而不必让我的观众有和重新加载整个页面。我知道有一种方法可以用ajax和jquery来实现，但是我不知道它是如何工作的。我也不希望他们有和点击按钮。如果有人知道该怎么做，我非常感激！

php jquery ajax refresh

来源：https://stackoverflow.com/questions/52458885/refresh-data-without-loading-page-php-sql

4条答案

按热度按时间

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

试着理解它是如何工作的，然后试着复制它。祝你好运。
你可以在这里找到相应的教程

更新

现在，下面的事件启动ajax 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);
    }
  });
})();

我在这里为您演示了这个实现。在这个演示中，每2秒( setTimeout(worker, 2000); )内容已更新。
您也可以立即加载数据：

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

有相应的演示。

赞(0）回复(0）举报 2021-06-18

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

上述函数每10秒调用一次，从response.php获取内容并在中更新 #some_div .

赞(0）回复(0）举报 2021-06-18

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>

下面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);
        }
    }
});

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

Hello
World
blah..
blah..

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

赞(0）回复(0）举报 2021-06-18

lhcgjxsq4#

我想你会想学的 ajax 首先，试试这个：ajax教程
如果您想知道ajax是如何工作的，那么直接使用jquery并不是一种好方法。我支持学习本机方式向服务器发送ajax请求，请看一些关于 XMLHttpRequest :

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

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

赞(0）回复(0）举报 2021-06-18

我来回答

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

4条答案

更新

相关问题

热门标签

最新问答