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

I have a website where I need to update a status. Like for a flight, you are departing, cruise or landed. I want to be able to refresh the status without having my viewers to have and reload the whole page. I know there is a way to do it with AJAX and jQuery, but I don't have any understanding of how that works. I also don't want them to have and click a button. If anybody knows how that would be done I much appreciate it!

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

3 个解决方案

#1

In general, if you don't know how something works, look for an example which you can learn from.

一般来说，如果你不知道某些东西是如何运作的，那么找一个你可以学习的例子。

For this problem, consider this DEMO

对于这个问题，请考虑这个演示

You can see loading content with AJAX is very easily accomplished with jQuery:

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

Try to understand how this works and then try replicating it. Good luck.

尝试了解它是如何工作的，然后尝试复制它。祝你好运。

You can find the corresponding tutorial HERE

你可以在这里找到相应的教程

Update

Right now the following event starts the ajax load function:

现在，以下事件启动ajax加载功能：

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

You can also do this periodically: How to fire AJAX request Periodically?

您也可以定期执行此操作：如何定期触发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);
    }
  });
})();

I made a demo of this implementation for you HERE. In this demo, every 2 seconds (setTimeout(worker, 2000);) the content is updated.

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

You can also just load the data immediately:

您也可以立即加载数据：

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

Which has THIS corresponding demo.

哪个有相应的演示。

#2

You can read about jQuery Ajax from official jQuery Site: https://api.jquery.com/jQuery.ajax/

您可以从官方jQuery站点了解jQuery Ajax：https：//api.jquery.com/jQuery.ajax/

If you don't want to use any click event then you can set timer for periodically update.

如果您不想使用任何单击事件，则可以设置计时器以定期更新。

Below code may be help you just example.

下面的代码可能只是帮助你的例子。

function update() {
  $.get("response.php", function(data) {
    $("#some_div").html(data);
    window.setTimeout(update, 10000);
  });
}

Above function will call after every 10 seconds and get content from response.php and update in #some_div.

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

#3

I think you would like to learn ajax first, try this: Ajax Tutorial

我想你首先要学习ajax，试试这个：Ajax Tutorial

If you want to know how ajax works, it is not a good way to use jQuery directly. I support to learn the native way to send a ajax request to the server, see something about XMLHttpRequest:

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

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

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