Question

的index.php：

<?php
$filelike = file_get_contents("like.txt");
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>

<?php
if(isset($_POST['click']))
{
    $filename = "like.txt";
    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $before_editing);
    $number_before = $before_editing[0];
    file_put_contents($filename, ++$number_before);

    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $after_editing);
    $number_after = $after_editing[0];

}
?>

<form action="" method="post">
<button name="click" class="click fa fa-heart-o" id="heart"></button>
<span id="lke"> <?php echo ($filelike) ?></span>
</form>

Like.txt：

这是我目前正在使用的代码。这里发生的是检索文件'like.txt'的内容（在这种情况下为4），然后它显示在＆lt; button＆gt;下面。在＆lt; span＆gt;之间标签

E.g。

<span id="lke">4</span>

当用户点击＆lt; button＆gt; ，页面将刷新，'like.txt'的内容将增加1（在这种情况下从4到5）。现在5将显示在＆lt; span＆gt;之间。标签而不是4。

但是，每次有人点击按钮时，我都不希望页面刷新。我希望如果这一切都发生在一次拍摄中 - 用户点击按钮，数字增加一个（全部在页面内，没有刷新）。

我曾尝试使用AJAX来解决这个问题：

<script>

  $(function () {

    $('form').on('submit', function (e) {



      $.ajax({
        type: 'post',
        url: 'like.php',
        data: $('click').serialize(),
        success: function () {
          alert('success'); 
        },
        error: function () {
          alert('error');
        },
      });
      e.preventDefault();
    });

  });
</script>

Like.php：

<?php
if(isset($_REQUEST['click']))
{
    $filename = "like.txt";
    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $before_editing);
    $number_before = $before_editing[0];
    file_put_contents($filename, ++$number_before);

    $content = file_get_contents($filename);
    preg_match("#\d+#", $content, $after_editing);
    $number_after = $after_editing[0];

}
?>

添加此内容后，整个操作停止工作，单击按钮会显示警告消息，但like.txt文件没有任何反应。

我该如何解决这个问题？

由于

Answer 1

<script>

   $(document).ready(function () {

    $('form').on('submit', function (e) {

      $.ajax({
        type: 'post',
        url: 'like.php',
        data: $('click').serialize(),
        success: function (result) {
          $("#lke").html(result);
        },
        error: function () {
          alert('error');
        }
      });
      e.preventDefault();
    });

  });
</script>

你收到了一条警报信息，因为那是成功的关键。如果获得有效输入，则执行success:后面的函数。在这里，您必须使用新计数器更新您的div。另一件事：您的url说'like.php'，但您写道，该文件名为Like.php。在unix系统上，您将获得404 Not Found，因为unix系统区分大小写。

另一件事是第一行。 $(function语法无效。你在ajax-function结束之前有一个逗号。

尝试打开浏览器的开发人员控制台以检查语法（错误显示在那里）。

在你的php脚本中，你必须回显num;）

Answer 2

注意：使用e.preventDefault()不是好习惯。尽量避免在大型项目中使用它。

从表单中删除action和method。使用客户端ajax作为请求。

<form>
<button type="button" name="click" class="click fa fa-heart-o" id="heart"></button>
<span id="lke"> <?php echo ($filelike) ?></span>
</form>


// Wait the page to load
$(document).ready(function() {
    $('#heart').on('click', function() {
        var data = {
          increase: true
        };
        $.ajax({
            type: 'post',
            url: 'like.php',
            data: data,
            success: function (data) {
                // This data seems to be the increased value.
                // It will be returned from the PHP code.
                alert(data); 
                // Or
                $("#lke").text(result);
            },
            error: function (err) {
                alert(err);
            },
        });
      });
    });
});

like.php：

<?php
if(isset($_POST['increase']))
{
    $filename = "like.txt";
    $content = file_get_contents($filename);
    // If the file will contain only the number, you do not need this.
    // preg_match("#\d+#", $content, $before_editing);

    $number_before = $content;
    file_put_contents($filename, ++$content);
    // now the $content variable is actually the updated number in the file.

    // You may not need this.
    // $content = file_get_contents($filename);
    // preg_match("#\d+#", $content, $after_editing);
    // $number_after = $after_editing[0];

    // Return the updated number to the client-side
    // In case many users changing this value simultaneously
    // This will return the current state of like.txt
    echo $content;
}
?>

是的，将您的文件重命名为小写。这是一种很好的做法，因为不同的系统/操作系统对文件名的读取方式有不同的含义。

在php中使用echo $variable或var_dump($var)来调试或查看变量发生了什么。

更新设置type="button"阻止按钮提交表单（防止刷新页面）

如何从一个页面发布表单数据并在同一页面上检索它？

2 个答案: