简体   繁体   English

如何自动刷新页面的一部分

[英]How to auto refresh a section of a page

I have a part of a page that has live data in it, I was thinking of just refreshing the page every couple of minutes, but that isn't right because of other elements of the page. 我有一个页面的一部分,其中包含实时数据,我想每隔几分钟刷新一次页面,但这是不正确的,因为页面的其他元素。

How can I do it? 我该怎么做? What language can I use to do this, what's easy to do and what isn't, what works well and what doesn't. 我可以用什么语言来做这件事,什么是容易做什么,什么不做,什么做得好,什么做不好。 Maybe some clear tutorials or even code examples. 也许一些明确的教程甚至代码示例。

I'd live to do this in something like PHP, but don't have a clue where to start, from a bit of research i see that Javascript and Ajax seem to be the standard for this but my knowledge of these languages aren't up to scratch. 我会活着用PHP之类的东西来做这个,但是不知道从哪里开始,从一些研究我看到Javascript和Ajax似乎是这个的标准,但我对这些语言的知识不是划伤。

Thanks for the time and help people. 感谢您的时间和帮助人们。

Oh, the data that is being displayed is coming from a database if that's any help. 哦,如果有任何帮助,显示的数据来自数据库。

Thanks again. 再次感谢。

You could use a Javascript library such as jQuery and do something like the following simplified example: 您可以使用jQuery等Javascript库,并执行以下简化示例:

$("document").ready(function(){
  var interval = setInterval(refresh_box(), 60000);
  function refresh_box() {
    $("#myDiv").load('path/to/databasepage.php');
  }
} /*<= The closer ) bracket is missing in this line*/

and in your path/to/databasepage.php page you can have your select query and echo the results out. 在您的path/to/databasepage.php页面中,您可以选择查询并回显结果。

What this does is sets a timeout to call a function (in this case, refresh_box() ) every 60 seconds (which is 60,000 miliseconds) and loads the data from path/to/databasepage.php in to your div with the id myDiv . 这样做设置一个超时,每隔60秒(即60,000毫秒)调用一个函数(在本例中为refresh_box() ),并将来自path/to/databasepage.php的数据加载到id为myDiv div中。

edit: 编辑:

If you want to stop the auto-refresh you can bind an element to clear the interval by doing the following: 如果要停止自动刷新,可以通过执行以下操作绑定元素以清除间隔:

// assuming you have a clickable element 
// (typically a button or so) id called 'stop_refresh'
$("#stop_refresh").click(function(){
  clearInterval(interval);
}

The easiest method doesn't even involve PHP or JavaScript. 最简单的方法甚至不涉及PHP或JavaScript。 You can do it with an <iframe> in plain HTML. 您可以使用纯HTML中的<iframe>来完成此操作。 The iframe loads an HTML or PHP page with the appropriate refresh header and it refreshes itself. iframe使用适当的刷新标头加载HTML或PHP页面并刷新自身。

Main HTML page: 主HTML页面:

<html>
<head></head>
<body>
   static content

    <iframe id='dynamic-content' src='refreshing.php' />
</body>
</html>

refreshing.php page: refresh.php页面:

<html>
<head>
  <!-- refresh every 5 seconds -->
  <meta http-equiv="refresh" content="5">
</head>
<body>
  dynamic content
</body>
</html>

Note that <meta http-equiv="refresh"> is discouraged for general refreshing a whole page, but it is pretty safe to use inside an iframe which must be constantly refreshing itself. 请注意,不鼓励<meta http-equiv="refresh">一般刷新整个页面,但在iframe中使用必须不断刷新自身是非常安全的。

You cant really execute a live refresh for page components in PHP, AJAX is the most common means (Asynchronous Javascript And Xml)- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action. 你不能真正为PHP中的页面组件执行实时刷新,AJAX是最常用的手段(Asynchronous Javascript和Xml) - 它使用Javascript来轮询其他脚本(可以是.php页面),然后根据请求返回预定义的输出 - 此输出可以是注入页面的内容,也可以是您的页面可以解释为另一个操作的数据。

In this instance, your .php page would include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (ie which element on the page should be updated with the response). 在这种情况下,您的.php页面将包含头部的JS(javascript),无论是链接还是内联,其中包含启动AJAX请求的详细信息 - 即,多长时间或按什么触发(按下按钮等),通过什么方式(POST或GET),发送的内容(您希望的任何其他变量),目标脚本是什么(将处理请求并输出您所需内容/数据的脚本),以及收到响应时该怎么做(即应该使用响应更新页面上的哪个元素)。

A little about AJAX: 关于AJAX的一点:

http://webdesign.about.com/od/ajax/a/aa101705.htm http://webdesign.about.com/od/ajax/a/aa101705.htm

http://webtrends.about.com/od/web20/a/what-is-ajax.htm http://webtrends.about.com/od/web20/a/what-is-ajax.htm

Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php') ): 可能最简单的方法是使用一个预先存在的Javascript库,如无处不在的jQuery(jquery.com),有成千上万的教程,虽然你需要做一些Javascript编程,但是库意味着你可以依赖相当简单的语法来做到这一点(就像$('#myelement').load('mypage.php')一样简单$('#myelement').load('mypage.php') ):

http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/ http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/

http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/ http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/

http://www.sitepoint.com/ajax-jquery/ http://www.sitepoint.com/ajax-jquery/

http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/ http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

In simple terms: 简单来说:

  1. You have your php page with the element that needs updating (page A) 你的php页面包含需要更新的元素(第A页)
  2. Build another php script which outputs the content you want 'refreshing', eg the latest news stories, each time it is run (page B) 构建另一个PHP脚本,每次运行时都会输出您想要“刷新”的内容,例如最新的新闻故事(第B页)
  3. Link to the jQuery library in your header section (page A) 链接到标题部分中的jQuery库(第A页)
  4. Write a simple jquery function in the header section of page A, which says every X seconds/minutes, run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A 在页面A的标题部分写一个简单的jquery函数,它表示每X秒/分钟,运行一个AJAX请求来获取页面B的内容并插入到页面A中的元素(DIV)中

it's really a large question. 这真是个大问题。

The most common way would be to use AJAX but you can also use a javascript database as TaffyDB - The JavaScript Database (never used it so i can't really speak about it). 最常见的方法是使用AJAX,但你也可以使用javascript数据库作为TaffyDB - JavaScript数据库 (从未使用它,所以我无法真正谈论它)。

Anyway, the easiest way would be to use JQUERY. 无论如何,最简单的方法是使用JQUERY。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM