无刷新更新页面上的数据 [英] Update data on a page without refreshing

问题描述

我有一个网站，我需要更新状态。 就像一个航班，你离开，巡航或降落。 我希望能够刷新状态，而无需我vieuwers拥有并重新加载整个页面。我知道有与AJAX和jQuery的一种方式，但我没有对如何工作的任何理解。我allso不想让他们拥有并点击一个按钮。 如果有任何身体知道如何将做我多少AP preciate了！

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 vieuwers to have and reload the whole page. I know there is a way with AJAX and jQuery, but I don't have any understanding of how that works. I allso don't want them to have and click a button. If any body 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

For this problem, consider this 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.

您可以找到相应的教程<大骨节病> 这里

You can find the corresponding tutorial HERE

现在下面的事件开始了ajax 负荷功能：

Right now the following event starts the ajax load function:

$("#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（工人，2000年）; ）的内容更新

您也可以只立即加载数据：

You can also just load the data immediately:

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

其中有<大骨节病> 本 相应的演示。

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