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

Question

我一直在研究一个问题，但我不知道如何解决它或解决方案是什么。我正在使用 infinityfree 在我的网站上工作作为免费用户。我正在创建一个简单的评论页面，用户可以在其中输入并用星星对其进行评分。评论被提交到我的数据库，文本是正确的，但星数没有被添加到 ($_POST["ratedIndex"]) .
当我试图回显变量 ratedIndex 时它是空的。它似乎没有按预期通过 Ajax 发送，我不知道为什么。警报不会触发，但在 chrome 检查元素的网络面板上会记录星星上的点击。希望我没有成为一个完整的笨蛋，因为我是创建网站的新手，所以我错过了一些必不可少的东西，任何帮助都是非常学徒的。
游戏信息.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并将其提供给您的意见 jqValue像这样的值(value)

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

最后拨打您的 php $ratedIndex=$_POST["jqueryValue"];就像我说的，如果您遇到问题并且无法解决问题，这只是解决问题的另一种方法 ajax工作你可以用这个。我发帖是因为你可能没有想过这样做。