在不刷新的情况下更新页面上的数据 [英] Update data on a page without refreshing

问题描述

我有一个需要更新状态的网站.就像航班一样，您要起飞、巡航或降落.我希望能够刷新状态，而无需让我的观众拥有和重新加载整个页面.我知道有一种方法可以用 AJAX 和 jQuery 来做到这一点，但我不明白它是如何工作的.我也不希望他们拥有并单击按钮.如果有人知道如何做到这一点，我将不胜感激！

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!

推荐答案

一般来说，如果您不知道某些东西是如何工作的，请寻找可以学习的示例.

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

对于这个问题，考虑这个DEMO

你可以看到使用 AJAX 加载内容很容易用 jQuery 完成:

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

$(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.

可以找到对应的教程这里

现在下面的事件启动了ajax load 函数:

Right now the following event starts the ajax load function:

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

您也可以定期执行此操作:如何定期触发 AJAX 请求?

You can also do this periodically: 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);) 更新一次内容.

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

您也可以立即加载数据:

You can also just load the data immediately:

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

其中有 THIS 相应的演示.

Which has THIS corresponding demo.

这篇关于在不刷新的情况下更新页面上的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！