Question

我希望显示数据库中的文件总数。为了澄清，说我有一个网站，人们可以上传他们的汽车图片，我想显示有多少图片的实时数量，最好的方法是什么？ Javascript，php？混合物？我设想了一个带有数字的div＆＃34; Total Pictures：x＆＃34;并且其中x将是实际总数。我计划使用MySQL来存储网站上的所有数据。这甚至建议有这么多与服务器通信的东西吗？是否有显示实时号码的名称？谢谢！

Answer 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

的更多信息

Answer 2

设置一个查询数据库的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>

希望这有帮助！

Answer 3

你希望它如何生活？只要有人更新网站，它就会有新价值，或者您是否真的希望它近乎实时更新？

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

的JSON

{ fileCount: 45020 }

客户端你有几个选择。您有AngularJS和EmberJS（以及更多）等不同的javascript框架，以及jQuery

等“普通旧”javascript和框架

关键字真的是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调用端点并获取一些数据。

Here is a link顺便提一下关于jQuery基础知识的教程。

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

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

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

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

Javascript还有一个名为setTimeout()的非常好的函数，它允许我们以后调用函数。

This描述了如何将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 here

我希望这有帮助！

如何显示上传的总文件的“实时”计数？

3 个答案: