Как передать значение переменной из JS в PHP без перезагрузки страницы?
Добрый день!
Имеется вот такой код на JS
var test = 200 + 100; $.ajax({ url: "index.php", type: "POST", data: { checkout: test, }, success: (res) => { console.log(res); } }); |
var test = 200 + 100; $.ajax({ url: "index.php", type: "POST", data: { checkout: test, }, success: (res) => { console.log(res); } });
Как видно из кода, я пытаюсь передать через AJAX значение переменной test в файлик index.php
Код index.php:
<?php $test = $_POST['checkout']; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div><?php echo $test ?></div> <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html> |
<?php $test = $_POST['checkout']; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div><?php echo $test ?></div> <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
Внутри body в div пытаюсь вывести значение этой переменной, но DIV остается пустым.
Через f12 на вкладке Network вижу, что запрос выполнен с ответом 200, в Payload вижу, что присутствует Form Data "checkout 300"
Что я делаю не так?
Дополнительно:
Ответы:
Не обращай внимания.
Простоты передаешь не только переменную, но весь код
<div><?php echo $test ?></div>
<?php echo $test ?> // выведет только переменную, без этой ошибки, это для понимания.
если без ошибки и свой код передавать будешь, то добавь
success: (res) => { $('div').text(res); } |
success: (res) => { $('div').text(res); }
- Кстати, в консоли через console.log вижу, что переменная как бы передалась, но если пытаюсь на index.php вызвать ее значение через var_dump($test), то вижу NULL.
- forgtra, Я на вопрос ответил. А не объяснять мат часть)))
- Олег, я не пойму о какой ошибке идет речь :(
- forgtra, Сорри. Не ошибка, а ответ сервера
Изучите server-side
В php скриптах не обязательно всегда отдавать клиенту html-текст, тем более в виде статики (за пределами тегов <? ?>).
А если вы еще используете ajax, обращаясь к тем же скриптам, что формируют полную html страницу, то можно отдавать ответ гораздо гибче (отдавать только чистые данные, без html в случае AJAX, и в остальных случаях - html оснастку, чтобы браузер нарисовал начальное состояние страницы):
<?php if(isset($_POST['checkout'])) { // получили параметр, который используется в AJAX - отдаем только данные (числа, строки, или json объекты) echo 'posted:'.$_POST['checkout']; } else { // не получили специфичных для ajax параметров - отдаем клиенту обычный HTML echo '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div><?php echo $test ?></div> <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>'; } ?> |
<?php if(isset($_POST['checkout'])) { // получили параметр, который используется в AJAX - отдаем только данные (числа, строки, или json объекты) echo 'posted:'.$_POST['checkout']; } else { // не получили специфичных для ajax параметров - отдаем клиенту обычный HTML echo '<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div><?php echo $test ?></div> <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>'; } ?>
На этом строят API своей системы.
Так у вас блок success пустой
success: (res) => { console.log(res); } |
success: (res) => { console.log(res); }
Блок success отрабатывает когда у вас возвращается HttpStatusCode 200, но вы там ничего не делаете.
Что нужно сделать? В соответствующем блоке success настраивать вывод/изменений элементов DOM структуры.
- я так понял, у меня в принципе не получится сделать то, что я хочу сделать... Дело в том, что аджакс запрос срабатывает каждый раз, когда нажимаю кнопку "Добавить" или "Убавить" количество позиций на странице и отдает результат переменной на php-страничку, где значение переменной присваивается переменной внутри php. Но я так понял, поскольку php - серверный язык, он отрабатывается раньше, чем js на этой странице и он в принципе не понимает, какое я значение пытаюсь в него впихнуть - он уже отработал и больше не выполняется.
- Немного неверно. Я с php вообще не знаком, так что на этой части ничего не скажу. ajax.success срабатывает ПОСЛЕ ответа сервера, так что всё там нормально приходит. Вы сказали, что у вас в консоль приходит ответ, потому что вы его выводите в блоке success в саму консоль:
success: (res) => { console.log(res); }
success: (res) => { console.log(res); }
Передать данные из js в php в ту же страницу файл при рендере страницы нельзя, js это клиент, php это сервер, когда загружается страница запрос пост отправленный js ещё не пришел, и $_POST['checkout'] не существует, поэтому выводит вам null.
Тоесть у вас во вкладке Нетворк браузера должно быть два запроса index.php один get на рендер страницы, второй ваш post, и во втором как раз ваша переменная и должна вывестись вместе со всем html.
Чтобы вывести данные в div лучше всеже использовать сам js
Если делаете API то создайте второй файл API.php и в нем методы которые будут возвращать данные вам в js, а jsом уже выводить их куда надо.
Судя по всему вы пытаетесь на со страницы index.php выполнить скрипт script.js и поменять просматриваемую же страницу?
Тогда вы принципиально делаете не то что нужно. Тут вообще не нужен ajax, т.к. вам нет необходимости выполнять какие-либо действия на сервере (ни передавать, ни получать данные). Все изменения текущей страницы можно произвести в браузере с помощью js ну и jQuery, раз вы его используете.
var test = 200 + 100; $("div").text(test); |
var test = 200 + 100; $("div").text(test);
Само собой, div-у неплохо бы присвоить какой-то атрибут, чтоб обращаться к нему, а не ко всем div-ам на странице.
- суть в том, что мне нужно присвоить значение переменной из JS переменной на index.php. echo в div'е просто для того, чтобы сразу видеть результат
- А моё предположение верно? index.php - это та страница из которой выполняется скрипт? Если да - написанное мной верно и ajax не нужен.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для передачи значения переменной из JavaScript в PHP без перезагрузки страницы можно воспользоваться технологией AJAX. AJAX позволяет отправлять асинхронные запросы к серверу и обновлять только определенные части страницы.
Вот пример как можно передать значение переменной из JavaScript в PHP с помощью AJAX:
1. Создайте HTML форму с полем для ввода значения переменной и кнопкой для отправки запроса:
```html
```
2. Напишите JavaScript функцию, которая будет отправлять значение переменной на сервер:
```html
function sendData() {
var variableValue = document.getElementById('myVariable').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'my_php_script.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText); // ответ от сервера
}
};
xhr.send('variable=' + variableValue);
}
```
3. Создайте PHP скрипт (например, `my_php_script.php`), который будет принимать значение переменной и обрабатывать его:
```php
```
Теперь, когда пользователь введет значение переменной в форму и нажмет на кнопку "Отправить", JavaScript отправит значение переменной на сервер без перезагрузки страницы. PHP скрипт `my_php_script.php` получит значение переменной, сможет его обработать и отправить обратно ответ, который JavaScript может использовать для дальнейших действий.
Надеюсь, это поможет вам передать значение переменной из JavaScript в PHP без перезагрузки страницы.