使用 Ajax 将可变数据作为帖子发送

Question

我一直在研究一个问题，但我不知道如何解决它或解决方案是什么。我正在使用infinityfree 作为免费用户在我的网站上工作。我正在创建一个简单的评论页面，用户可以在其中输入然后用星号对其进行评分。评论被提交到我的数据库，文本正确，但星数没有添加到($_POST["ratedIndex"])。

当我尝试回显变量 ratedIndex 时，它是空的。似乎它没有按预期通过 Ajax 发送，我不知道为什么。警报不会触发，但对星星的点击会在 chrome 检查元素的网络面板上注册。希望我不是一个彻头彻尾的傻瓜，因为我是创建网站的新手，所以我没有错过一些必不可少的东西，并且任何帮助都是非常学徒的。

gameInfo.php：

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST"){
        require_once 'DBConnect.php';

        $game;
        $user;
        $review;
        $userid;
        $ratedIndex;
    
        $stmt = $conn->prepare("INSERT INTO reviews(game, user, userid, review, indexStar) VALUES (?,?,?,?,?)");
        $stmt->bind_param("sssss",$game, $user, $userid, $review, $ratedIndex);
        $userid = $_SESSION["userid"];
        $game = $gameTitle;
        $user = $_SESSION["username"];
        $review = $_POST["uploadReview"];
        $ratedIndex = ($_POST["ratedIndex"]);

        $stmt->execute();
    }
?>

<?php
        $id = $_SESSION["userid"];
        $gamename = $gameTitle;
        $rowzero ="0";
        $sql_ifreviewexist ="SELECT * FROM reviews WHERE reviews.game=?";
        $exist = $conn->prepare($sql_ifreviewexist);
        $exist->bind_param('s', $gamename);
        $exist->execute();
        $res = $exist->get_result();
        $reviewexist_row = mysqli_num_rows($res);
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
         echo ' <div id="noreviewsExists">
                <div class="instructions"><p>Write a review for '.$gamename.'</p></div>
                <form id="reviewForm" method="POST" action="">
                <textarea type="text" id="reviewTextarea" name="uploadReview"></textarea>
                <div class="reviewStars">
                <i class="fa fa-star" data-index="0"></i> 
                <i class="fa fa-star" data-index="1"></i> 
                <i class="fa fa-star" data-index="2"></i> 
                <i class="fa fa-star" data-index="3"></i> 
                <i class="fa fa-star" data-index="4"></i> 
                </div>
                <div id="submitReview">
                    <button id="submitButton" type="submit" form="reviewForm">Submit</button>
                </div>
            </form>
            </div>';
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var ratedIndex = -1;
    $(document).ready(function () {
        resetStarColors();

        $('.fa-star').on('click', function (){
            ratedIndex = parseInt($(this).data('index'));
            $.ajax({
                url: "gameInfo.php",
                method: "POST",
                dataType: 'json',
                data: {
                    ratedIndex: ratedIndex
                }, success: function (data){
                    alert("ok");
                }

            });
        });

        $('.fa-star').mouseover(function () {
            resetStarColors();

            var currentIndex = parseInt($(this).data('index'));
            setStars(currentIndex);
        });

        $('.fa-star').mouseleave(function () {
            resetStarColors();

            if(ratedIndex != -1)
                setStars(ratedIndex);
        });

    });
    
    function setStars(max) {
        for (var i=0; i <=max; i++)
                $('.fa-star:eq('+i+')').css('color', 'yellow');
    }

    function resetStarColors() {
        $('.fa-star').css('color', 'black');
    }

</script> 

编辑：

在ADyson 的一些见解之后，我做了这样的事情：

 $test = $_POST["ratedIndex"];
if((isset($_SESSION["username"])) && ($reviewexist_row==$rowzero)) {
echo '<div>'.$test.'</div>';
...}

当我点击星星时，它会出现在预览下的网络面板中

所以现在我更加疑惑为什么我尝试将它插入到表格中时它不起作用。

Answer 1

我知道这不是问题的正确答案，但它是一种替代方法，也许您会发现它有些帮助。我想出的解决方案是获取您的 jquery 给出的值并将其设置为 sumbit 表单内的不可见输入值。

<form id="reviewForm" method="POST" action="">
                <textarea type="text" id="reviewTextarea"name="uploadReview</textarea>
                <div id="submitReview">
                <input type="hidden" id="jqValue" name="jqueryValue" value=""/>
                    <button id="submitButton" type="submit" form="reviewForm">Submit</button>
                </div>

然后将变量ratedIndex 传递给您的输入jqValuevalue，就像这样

$('.fa-star').on('click', function (){
            ratedIndex = parseInt($(this).data('index'));
            $("#jqValue").val(ratedIndex);
        });

最后打电话给你的php$ratedIndex=$_POST["jqueryValue"];

就像我说的那样，这只是解决问题的另一种方法，如果您遇到困难并且无法使 ajax 工作，您可以使用它。我发帖是因为你可能没有想过这样做。