使用AJAX請求進行PHP計數

Question

我正在嘗試計算SESSION變量，但我不希望用戶看到任何刷新。

我下面的代碼的問題是，它只更改一個，然后需要刷新。 我該如何做而無需任何刷新？

test page:

     <?php session_start(); ?>
            <script src="../../../common/js/jquery-1.11.2.min.js"></script>
        <script src="../../../common/js/jquery.touchwipe.min.js"></script>
    <?php
    if(empty($_SESSION['counter'])){
    $_SESSION['counter'] = 1;
    }
    $count = $_SESSION['counter'];


    ?>
    <div id="main"><?= $count; ?></div>
    <button id="detailed">Link</button>

    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('click','#detailed',function(){
                var count = "<?= $count ?>";
                count++;
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: {countertje: count},
                    success:function(data){
                        $('#main').html(data);
                        console.log(data);
                    }

                });
            })

        });
    </script>

do_ajax.php

    <?php
    session_start();
    $_SESSION['counter'] = $_POST['countertje'];
    echo $_SESSION['counter'];
    ?>

Answer 1

您可以在javascript中使用的東西

 var count = $('#main').val();

而不是跟隨：

var count = "<?= $count ?>";

在javascript中編寫PHP代碼不是一個好主意！

Answer 2

<script type="text/javascript">
        var count = "<?= $count ?>";
        $(document).ready(function(){
            $(document).on('click','#detailed',function(){
                count++;
                $.ajax({
                    type: "POST",
                    url: "test.php",
                    data: {countertje: count},
                    success:function(data){
                        $('#main').html(data);
                        console.log(data);
                    }

                });
            })

        });
    </script>

count應該是一個全局變量