如何從一頁發布表單數據並在同一頁面上檢索？

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：

4

這是我當前正在使用的代碼。 此處發生的是，檢索了文件“ like.txt”的內容（在這種情況下為4），然后將其顯示在<span>標記之間的<button>下方。

例如

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

當用戶單擊<button>時，頁面將刷新，“ like.txt”的內容將增加一（在這種情況下，從4增加到5）。 現在，<span>標記之間將顯示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>

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:背后的功能success:如果獲得有效輸入，則執行該功能。 在這里，您必須使用新的計數器更新div。 另一件事：您的url說'like.php' ，但您寫道，該文件名為Like.php 。 在unix系統上，您將得到404 Not Found因為unix系統區分大小寫。

另一件事是第一行。 $(function是無效的語法。而在ajax函數結束之前，您有一個逗號。

嘗試打開瀏覽器的開發人員控制台以檢查語法（錯誤在那里顯示）。

在您的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)進行調試或查看變量的狀態。

UPDATE設置type="button"阻止按鈕提交表單（防止刷新頁面）