У меня есть ошибка в моем Ajax-коде, который содержит два сценария и не может найти его

Question

Оформление на странице работает как надо - визуально.При нажатии на звездочку ничего не происходит, никакого вызова ajax.Я вчера осознал коллизию двух сценариев, и теперь это должно быть решено с помощью $ b.Но моя страница PHP не показывает мне значение рейтинга, как ожидалось.

Я подумал, что у меня неправильная ссылка на вызов Ajax, массаж-форма / массаж-рейтинг, ничего не работает.Я немного растерялся, смотрю на это уже несколько дней, возможно, смотрю на меня слепо.Для меня это выглядит правильно, но без результата, это не правильно.

Пробовал несколько решений на втором скрипте, on.click и т. Д. Безрезультатно.

<link rel="stylesheet" href="css-stars.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery.barrating.min.js"></script>
<script type="text/javascript">
    var $b = $.noConflict(true);
</script>

<form id="massage-form">
    <select id="massage-rating" name="stars" method="POST">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <input type="hidden" type="submit" type="button" id="submit-button">
</form>
<script type="text/javascript">
    $b(function() {
        $("#massage-rating").barrating({
        theme: 'css-stars'
        });
        $('select').barrating();
        $('select').barrating('set', 4);
        showSelectedRating: true;
    });
</script>

<script type="text/javascript">
    $("#massage-form").on('submit', function(event){
        event.preventDefault();
        var formData = $(this).serialize();
        $.ajax({
            type: 'POST',
            url: './review/create_star_rating.php',
            data: formData,
                success: function(response){
                    window.setTimeout(function(){window.location.reload()},1000);
            }
        });
    });

Я ожидаю, что этот код PHP даст мне визуальное значение, но этого не происходит.

if(isset($_POST['rating'])){
    $rating = $_POST['rating'];
    echo $rating;
    break;

не полный код, только этот конкретный фрагмент.

Любые указатели / решения будут высоко оценены,Я предполагаю, что у этого есть самое простое решение, но я не могу видеть это.

Относительно плохо знаком с Ajax, но все равно много читаю.

Я был вдохновлен этим: https://www.phpzag.com/star-rating-system-with-ajax-php-and-mysql/

Answer 1

Ajax-код исправлен,

работает.

<link rel="stylesheet" href="css-stars.css">
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery.barrating.min.js"></script>

<form id="massage-form" Method="POST">
    <select id="rating" name="stars">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
</form>

<script type="text/javascript">
$(function() {
    $("#rating").barrating({
        theme: 'css-stars',
        initialRating: 4,
        onSelect: function(value){
            $.ajax({
                type: 'POST',
                url: './review/create_star_rating.php',
//              dataType: 'json',
                data: {number: value},
                success: function(data, textStatus, jqXHR){
                    alert('Thank you for your rating');
//                  alert(jqXHR.responseText);
//                  window.setTimeout(function(){window.location.reload()},1000);
                },
                error: function(xhr){
                    alert(xhr.status +" :" + xhr.responseText);
                }
            });
        }
    });
})
</script>

Теперь я хочу исправить мой php-код, чтобы он работал как предполагалось, но это все равно было в процессе разработки.Я оставляю это здесь, если у других есть подобные проблемы.