1

I am looking to display the total number of files in a database. To clarify, say I had a website where people could upload pictures of their cars, and I wanted to display a live number of how many pictures there are, what would be the best way to do this? Javascript, php? A mix? I envision a div with a number saying "Total Pictures: x" and where x would be whatever the live total is. I plan on using MySQL to store all the data on the website. Is this even recommended to have something communicate with the server this much? Is there a name for displaying a live number? Thanks!

4

3 回答 3

1

如果您正在考虑使用 AngularJS 方式，您可以创建一个 Poller 服务，它每秒轮询一次（假设您的 /counter.php 返回 json）：

app.factory('Poller', function($http, $timeout) {
  var data = { response: {}};
  var poller = function() {
    $http.get('/counter.php').then(function(r) {
      data.response = r.data;
      $timeout(poller, 1000);
    });      
  };
  poller();
  return {
    data: data
  };
});

然后你的控制器：

app.controller('CounterCtrl', function(Poller, $scope){
    $scope.counter = Poller.data;
});

最后在你看来：

{{counter.response}}

你可以阅读更多关于$http

于 2013-08-04T14:36:20.503 回答
0

你希望它活到什么程度？每当有人更新网站时，它就会有新的价值，还是你真的希望它近乎实时地更新？

如果是后者，您必须针对某种返回数据库中文件数量的 API 使用 Javascript。因为您使用的是 PHP，所以我无法帮助您，但这应该不会太难。只需返回一些类似于

{ fileCount: 45020 }

在客户端，您有几个选择。您拥有不同的 javascript 框架，例如AngularJS和EmberJS（以及更多），以及“普通的旧”javascript 和jQuery等框架

关键字实际上是AJAX，即使这只是使用 javascript 使网站动态化的一种流行语。

我是使用 AngularJS 的粉丝，因为它很简单，但我会先尝试为您提供一些使用 jQuery 的建议。请注意，我已经好几年没有使用 jQuery 了。

jQuery 方式

jQuery 有一个名为jQuery.getJSON()的函数，根据文档，您可以像这样使用该函数：

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "http://example.com/api/fileCount.json")
.done(function(data) { console.log(data) })
.fail(function() { console.log( "error" ); })
.always(function() { console.log( "complete" ); });

所以这意味着我们可以调用一个端点并使用 jQuery 获取一些数据。

顺便说一下，这是一个关于 jQuery 基础知识的教程的链接。

jQuery 让我们能够做这样的事情：

<div id="divTest1"></div>
<script type="text/javascript">
  $("#divTest1").text("Hello, world!");
</script>

执行该操作时，ID 为“divTest1”的 div 将包含文本“Hello, world!”。

这听起来像是我们可以在这里使用的东西！

Javascript 也有一个非常好的函数，叫做setTimeout()，它允许我们让它稍后调用一个函数。

这描述了如何使用 jQuery 和setTimeout()

如您所见，它还向我们展示了jQuery.documentReady()，这是一个在网站完成加载时触发的事件，因此它是放置我们想要执行的代码的好地方。下面的例子展示了如何使用 jQuery 在 3 秒后隐藏一个 id=div 的 div。

jQuery(document).ready(function () {
  setTimeout( "jQuery('#div').hide();",3000 ); //hide a div after 3 seconds
});

结合这些东西，您应该能够进行重复调用，从您的服务器获取数据，然后使用您获取的数据更新 div 或其他元素。

只需创建一个使用jQuery.getJSON()获取数据的函数，然后在其底部添加一个 setTimeout 调用以在 X 秒内自行运行（无论您希望它更新的频率如何）。

在jQuery.documentReady()中，您在文档第一次加载时调用该函数。

在 getJSON() 调用的 .done() 位中，您可以使用您想要的任何 html 将您从服务器获得的数据添加到您的 div 中。我向您展示了如何使用$("#divTest1").text()，但也有一个.html()作用相同，但您应该使用它来将 html 添加到元素。

有角度的方法是使用 AngularJS 的$http来做同样的事情，但我不建议学习 AngularJS，除非你对 Javascript 有更好的掌握。

当你这样做时，我强烈推荐它。这是一种比使用 jQuery 更好的方法。

您可以在此处阅读有关 AngularJS的信息

我希望这有帮助！

于 2013-08-04T08:48:03.527 回答
0

设置一个查询数据库并返回文件上传总数的 PHP 脚本。之后，您可以在页面上使用 JavaScript 以指定的时间间隔定期调用服务器并从您的 PHP 脚本中获取计数数据。使用jQuery和GET，您可以执行以下操作：

jQuery(function($){
  setInterval(function(){
    $.get( '/counter.php', function(fileUploadCount){
      $('#counter').html( fileUploadCount );
    });
  },20000); // 20 seconds
});

在您的 HTML 中：

<p><span id='counter'>xx</span> files have been uploaded so far!</p>

希望这可以帮助！

于 2013-08-04T08:37:01.330 回答