Это просто для решения вашей проблемы с вашими объявленными значениями AJAX, которые не отображаются там, где вы ожидаете их ТОЛЬКО.
Существует миллиард способов, которыми вы можете кодировать это, но вот только один, который я изменил в отношениивыполнить отладку.Даже я узнал новый трюк, делающий это.
Просто Nit Picking, но то, что выделяется при чтении вашего кода, это использование therate, когда везде в вашем JS вы используете верблюжий чехол, поэтому он должен быть theRate . Хорошая идея - выбрать стандарт и придерживаться его.
Кроме того, в вашем JS появилось то, что казалось вложенными событиями.Некоторая попытка заставить theRate работать правильно?В любом случае ...
Перво-наперво. Вернитесь к чему-то основному и вернитесь обратно.(Хотя в этом случае я не раздевал ваш взгляд назад, но сделал это с вашим контроллером.
Ваш взгляд. Мне пришлось немного изменить это и, надеюсь,комментарии объясняют вещи.
Я назвал это rating_view.php
<form name="my-form" id="my-form">
<div class="rate">
<div id="1" class="btn-1 rate-btn">1</div>
<div id="2" class="btn-2 rate-btn">2</div>
<div id="3" class="btn-3 rate-btn">3</div>
<div id="4" class="btn-4 rate-btn">4</div>
<div id="5" class="btn-5 rate-btn">5</div>
</div>
<input type="submit">
</form>
<!-- Added for viewing debug response -->
<div id="json-debug-output"></div>
<!-- Some styles added as non were provided -->
<style>
.rate-btn-hover {
background: blue;
}
.rate-btn-active {
background: yellow;
}
</style>
<script src= <?= base_url('assets/js/jquery_v3.4.1.js'); ?>></script>
<script>
$(document).ready(function () {
// Define your Dom Elements ONCE for efficiency etc
let domRateButton = $('.rate-btn');
let domMyForm = $('#my-form');
let theRate = 0; // Declares this as a Global Var.
let domJsonDebugOutput = $('#json-debug-output');
// Hover
domRateButton.hover(function () {
domRateButton.removeClass('rate-btn-hover');
let theRate = $(this).attr('id');
for (let i = theRate; i >= 0; i--) {
$('.btn-' + i).addClass('rate-btn-hover');
}
});
// Click
domRateButton.click(function () {
console.log('Rating Button Clicked');
theRate = $(this).attr('id');
domRateButton.removeClass('rate-btn-active');
for (let i = theRate; i >= 0; i--) {
$('.btn-' + i).addClass('rate-btn-active');
}
});
// Submit
domMyForm.on('submit', function (e) {
e.preventDefault(); // This was missing
console.log('Posting Rate = ' + theRate);
$.ajax({
type: "POST",
// dataType: 'text',
dataType: "json",
url: "<?php echo base_url(); ?>reviews/add_review",
data: {'act': 'rate', 'post_id':<?= $post_id; ?>, 'rate': theRate},
success: function (data) {
let debugData = JSON.stringify(data);
domJsonDebugOutput.text(debugData); // Display in our Debug Div
},
error: function (data) {
let debugData = JSON.stringify(data);
domJsonDebugOutput.text(debugData); // Display in our Debug Div
}
});
});
});
</script>
Обратите внимание на AJAX изменения в dataType из текста до json . Также обратите внимание, что data является массивом .
Я также изменил область действия theRate с локального на глобальный, чтобы он был «доступным для поиска»среди функций.
НЕ УВЕРЕН, как была настроена ваша форма, но я добавил e.preventDefault (); чтобы предотвратить отправку формы на тестирование.
Лично я недоволен тем, что PHP-переменные встроены в любойJS-код и я обычно использую JS в качестве внешних файлов и передаем значения из PHP, читая их с помощью JS, но у него также есть свои плюсы и минусы. Поэтому я оставил это в покое, чтобы не заходить слишком далеко с этим.
Для вашего контроллера - называемые Reviews.php
public function show() {
$data['post_id'] = 1; // This comes from somewhere
$content = $this->load->view('rating_view', $data, TRUE);
echo $content;
}
/**
* Called by AJAX
* Do we need to test this is only called by AJAX?
*/
public function add_review() {
// Return everything that was sent for debugging
echo json_encode($this->input->post());
// var_dump($this->input->post());
exit();
}
Так что здесь у меня только что был метод show (), показывающий форму и add_review, чтобы просто возвращать назад то, что было отправлено.Вы можете делать все что угодно с этим.Одним из приятных аспектов в этом случае является то, что вам не нужно использовать console.log), поскольку вы можете просмотреть все это на странице (НО ТОЛЬКО ДЛЯ ОТЛАДКИ).Это еще один вариант.
Так что поиграйте с этим и начните вносить изменения в свой код и посмотрите, что работает.Помните - вернитесь к основам и выберите бит, который не работает.
Далее вы обнаружите, что вас могут споткнуться о перенаправление.Но это для другого поста.