Задать вопрос
@forgtra
javascript

Как передать значение переменной из JS в PHP без перезагрузки страницы?

Добрый день!

Имеется вот такой код на JS
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>


Внутри body в div пытаюсь вывести значение этой переменной, но DIV остается пустым.
Через f12 на вкладке Network вижу, что запрос выполнен с ответом 200, в Payload вижу, что присутствует Form Data "checkout 300"

Что я делаю не так?
  • Вопрос задан
  • 3613 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 5
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Не обращай внимания.
Простоты передаешь не только переменную, но весь код
<div><?php echo $test ?></div>
<?php echo $test ?> // выведет только переменную, без этой ошибки, это для понимания.
если без ошибки и свой код передавать будешь, то добавь
success: (res) => {
  $('div').text(res);
}
Ответ написан
4 комментария
4 комментария
@alexalexes
В 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>';
   }
?>

На этом строят API своей системы.
Ответ написан
Комментировать
Комментировать
NikFaraday
@NikFaraday
Student full-stack Developer
Так у вас блок success пустой
success: (res) => {
    console.log(res);
  }

Блок success отрабатывает когда у вас возвращается HttpStatusCode 200, но вы там ничего не делаете.

Что нужно сделать? В соответствующем блоке success настраивать вывод/изменений элементов DOM структуры.

Ответ написан
2 комментария
2 комментария
@yuriy_yarvi
Передать данные из js в php в ту же страницу файл при рендере страницы нельзя, js это клиент, php это сервер, когда загружается страница запрос пост отправленный js ещё не пришел, и $_POST['checkout'] не существует, поэтому выводит вам null.
Тоесть у вас во вкладке Нетворк браузера должно быть два запроса index.php один get на рендер страницы, второй ваш post, и во втором как раз ваша переменная и должна вывестись вместе со всем html.
Чтобы вывести данные в div лучше всеже использовать сам js
Если делаете API то создайте второй файл API.php и в нем методы которые будут возвращать данные вам в js, а jsом уже выводить их куда надо.
Ответ написан
Комментировать
Комментировать
@eugeshshsh
Судя по всему вы пытаетесь на со страницы index.php выполнить скрипт script.js и поменять просматриваемую же страницу?
Тогда вы принципиально делаете не то что нужно. Тут вообще не нужен ajax, т.к. вам нет необходимости выполнять какие-либо действия на сервере (ни передавать, ни получать данные). Все изменения текущей страницы можно произвести в браузере с помощью js ну и jQuery, раз вы его используете.
var test = 200 + 100;
$("div").text(test);

Само собой, div-у неплохо бы присвоить какой-то атрибут, чтоб обращаться к нему, а не ко всем div-ам на странице.
Ответ написан
2 комментария
2 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Несложная верстка из Figma bootstrap5 scss npm
18 дек. 2024, в 04:59
1000 руб./в час
Отправка команды на открытие всех окон автомобиля Chery Tiggo 7 Pro
18 дек. 2024, в 03:28
16000 руб./за проект
Установить музыкальный софт
18 дек. 2024, в 01:04
5000 руб./за проект
Ещё заказы