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

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'的内容（在本例中为4），然后将其显示在标记之间的下面

例如

4

当用户单击时，页面将刷新，“like.txt”的内容将增加1（在本例中从4增加到5）。现在，标签之间将显示5，而不是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>

$（函数（）{
$（'form'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:'like.php'，
数据：$（'click'）。序列化（），
成功：函数（）{
警惕（“成功”）；
},
错误：函数（）{
警报（“错误”）；
},
});
e、 预防默认值（）；
});
});

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文件不会发生任何变化

我该如何解决这个问题

谢谢

$（文档）.ready（函数（）{
$（'form'）。关于（'submit'，函数（e）{
$.ajax({
键入：“post”，
url:'like.php'，
数据：$（'click'）。序列化（），
成功：功能（结果）{
$（“#lke”）.html（结果）；
},
错误：函数（）{
警报（“错误”）；
}
});
e、 预防默认值（）；
});
});

你会收到一条警告信息，因为这是成功的关键。如果获得有效输入，则执行

success:

背后的函数。在这里，您必须使用新计数器更新您的div。 另一件事：你的

url

上写着

'like.php'

，但是你写的文件名为

like.php

。在unix系统上，您将得到一个

404notfound

，因为unix系统区分大小写

另一件事是第一行<代码>$（函数的语法无效。并且在ajax函数结尾前有一个逗号

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

---

在php脚本中，必须回显num；）

注意：使用

e.preventDefault（）

不是好的做法。在大型项目中尽量避免这种情况

从表单中删除

操作

和

方法

。对请求使用客户端

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);
            },
        });
      });
    });
});

//等待页面加载
$（文档）.ready（函数（）{
$（'heart'）。在（'click'，function（）上{
风险值数据={
增加：对
};
$.ajax({
键入：“post”，
url:'like.php'，
数据：数据，
成功：功能（数据）{
//这些数据似乎是增加的价值。
//它将从PHP代码中返回。
警报（数据）；
//或
$（“#lke”）。文本（结果）；
},
错误：函数（err）{
警惕（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\u dump（$var）

调试或查看变量发生了什么

---

更新设置

type=“button”

阻止按钮提交表单（阻止刷新页面）

我几周前刚刚写过，它将完成完成此操作所需的确切步骤。您需要添加一些错误检查，并查看浏览器控制台中的请求/响应。请验证是否设置了

$\u request['click']

<代码>$\u请求实际上是非标准的，应该避免。因为您正在使用

post

使用

$\u post

。您的ajax调用看起来是正确的。谢谢，但我无法让这段代码正常工作，PHP不起作用，数字也没有增加

<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>

<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);
            },
        });
      });
    });
});

<?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;
}
?>