使用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应该是一个全局变量