PHP喜欢file.txt中的按钮计数器

时间:2016-12-10 13:28:14

标签: javascript php html5 css3

我想重新创建几个像按钮一样在file.txt中保存计数但是不起作用:/

<?php

function getClickCount()
{
    return (int)file_get_contents("counter.txt");
}

function incrementClickCount()
{
    $counter = getClickCount() + 1;
    file_put_contents("counter.txt", $counter);
}
?>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript">
  var clicks = 0;

  function onClick() {
    clicks = 1;
    document.getElementById("clicks").innerHTML = clicks;
  };

</script>
<button type="button" onClick="onClick()" title="Vous aimez la couverture?" class="btn"><img id="heart" src="https://trello-attachments.s3.amazonaws.com/568304b85fa72dcb958a1edf/584acfc48b82595af77f2030/6257bf1efec79d5baf22309f8f327ce5/favorite.png" /></button>
<p><a id="clicks"><?php echo getClickCount(); ?></a></p>

DEMO HERE

在此先感谢您的帮助,我现在正在网上寻找它,但我没有...

亚历山大

2 个答案:

答案 0 :(得分:2)

counter.php

<?php

    function getClickCount() {
        return (int)file_get_contents("counter.txt");
    }

    function incrementClickCount() {
        $counter = getClickCount() + 1;
        file_put_contents("counter.txt", $counter);
    }

    if(!empty($_POST)) {
        if($_POST['click'] == 'true') {
            incrementClickCount();
            echo getClickCount();
        } else {
            echo getClickCount();
        }
    }

?>

<强> counter.txt

0

<强>的index.php

<html>
   <head>
      <title>Click Counter</title>
   </head>
   <body>
      <button type="button" onClick="onClick()" title="Vous aimez la couverture?" class="btn"><img id="heart" src="https://trello-attachments.s3.amazonaws.com/568304b85fa72dcb958a1edf/584acfc48b82595af77f2030/6257bf1efec79d5baf22309f8f327ce5/favorite.png" /></button>
      <p><a id="clicks"></a></p>

      <script>
          function onClick() {
              loadClicks(true);
          }

          function loadClicks(isClicked) {
              var click = isClicked === true ? true : false;
              $.ajax({
                 url: 'counter.php',
                 type: 'POST',
                 data: {
                   'click': click
                 },
                 success: function(response) {
                   $('#clicks').text(response);
                 }
              });
          }

          loadClicks(false);
      </script>
   </body>
</html>

代码说明

每当您点击该按钮时,都会在ajax的后台异步发送counter.php个请求。这个PHP文件相应地接收请求和处理。

在代码中,我们在ajax POST请求中将单个数据发送到PHP文件,该请求是一个布尔数据,它是根据条件设置的,就像单击按钮一样。

在PHP文件中,如果通过按钮单击或其他方式发出请求,您将检查条件。如果是按钮,您将增加点击并发送点击计数器值作为响应,否则您只会发送该值。

您会注意到我在loadClicks函数中使用参数true调用了onClick函数,在函数外部调用了false,这意味着我首先调用loadClicks(false)一旦脚本启动它的执行只加载点击值,然后当我点击按钮loadClicks(true)被调用意味着增量并获取值时。

仔细阅读后,您将了解代码。

答案 1 :(得分:0)

乍一看,我看到你的剧本有3个问题。

1)您正在混合使用JavaScript和PHP。 JavaScript在浏览器上运行,PHP在服务器上运行。如果要在脚本的这些部分之间交换数据,则需要从JS部件到服务器进行服务器调用,例如:通过使用AJAX。用JavaScript编写PHP脚本的简单HTML请求也可以。

2)另外,<button>标记需要嵌入<form>中,并指向要执行的脚本(可以是相同的脚本)。

3)你似乎永远不会打电话给incrementClickCount(),至少不会在这里显示的部分。

建议

将PHP中的所有内容编码,然后解决其他两点。或者您需要实现某种形式的客户端/服务器通信。