Отправка переменной из JS-кода в PHP-скрипт

Question

Написал код на JS для отправки на сервер значений некоторых переменных, однако все время получаю NULL. Пробовал уже полностью путь к PHP-скрипту прописывать, и форматирование разное применять, но все без толку. Вот JS код с попыткой отправить одну переменную:

// Обработчик событий, вызывающийся при выборе даты и времени
var dateTimePicker = document.getElementById('date-time-picker');
if (dateTimePicker) {
   dateTimePicker.addEventListener("change", function() {
   var selectedDate = moment(dateTimePicker.value);

   // Получение часового пояса пользователя
   var userTimezoneOffset = selectedDate.utcOffset() / -60;

   // Получение часового пояса города специалиста (Канкун)
   var specialistTimezoneOffset = -5;

   // Вычисление времени, учитывая часовой пояс пользователя и специалиста
   var localTime = selectedDate.clone().utcOffset(userTimezoneOffset);
   var specialistTime = localTime.clone().utcOffset(specialistTimezoneOffset);

  // Преобразование времени в часовой пояс города специалиста (Канкун)
  var specialistCityTime = specialistTime.clone().tz("America/Cancun");

  // Форматирование даты и времени в нужный формат
  var formattedDateTime = specialistCityTime.format("DD.MM.YYYY HH:mm:ss");
  var customerTime = document.getElementById("customer_time");
  var formattedCustomerTime = selectedDate.format("DD.MM.YYYY HH:mm:ss");

  // Отображение даты и времени на странице
  var timeDiffElement = document.getElementById("specialist_time");
  timeDiffElement.innerHTML += formattedDateTime;
  customerTime.innerHTML += formattedCustomerTime;

  // Создание объекта FormData и добавление в него параметров
  var formData = new FormData();
  formData.append("specialistTime=", formattedCustomerTime);

  // Отправка данных на сервер с помощью AJAX
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
      console.log(this.responseText);
    }
  };
xhttp.open("POST", "http://localhost/customer_record.php", true);
xhttp.send(formData);
});
}

Вот код PHP, в котором пытаюсь получить нужное значение на сервере и записать его в переменную для дальнейшего использования:

<?php
$link = mysqli_connect('localhost', 'root', '', 'test_db');
mysqli_set_charset($link, 'utf8');
var_dump($_POST);
$customer_Name = $_POST['customerName'];
$customer_Surname = $_POST['customerSurname'];
$customer_FIO = $customer_Name.' '.$customer_Surname;
$customer_Email = $_POST['customerEmail'];
$dateOfSession = $_POST['date-time-picker'];
$convertedDate = date('Y-m-d H:i:s', strtotime($dateOfSession));
$choosenLanguage = $_POST['fav_language'];

$field = array_fill(0, 3, 0);
foreach ($_POST['check'] as $index) {
    $field[$index] = 1;
}
$stringOfChecks = implode(',', $field);
echo $stringOfChecks;
if (isset($_POST['specialistTime'])) {
    $specialistTime = $_POST['specialistTime'];
    $limitedSpecialistTime = DateTime::createFromFormat('Y-m-d\TH:i:s', $specialistTime, new DateTimeZone('UTC'));
    echo $limitedSpecialistTime->format('Y-m-d H:i:s');
}
$limitedSpecialistTime = DateTime::createFromFormat('Y-m-d\H:i:s', $specialistTime, new DateTimeZone('UTC'));
echo $limitedSpecialistTime;
$startTime = DateTime::createFromFormat('H:i', '07:30', new DateTimeZone('UTC'));
$endTime = DateTime::createFromFormat('H:i', '19:30', new DateTimeZone('UTC'));
if ($limitedSpecialistTime >= $startTime && $limitedSpecialistTime <= $endTime) {
    $query2 = "INSERT INTO customers (Email, Full_Name, selected_services, language) VALUES ('$customer_Email', '$customer_FIO', '$stringOfChecks', '$choosenLanguage');";
    $query3 = "INSERT INTO sessions (customer_id, start_time, status)
    VALUES ((SELECT id FROM customers WHERE Email = '$customer_Email' LIMIT 1),
    '$convertedDate',
    'Open')";   
    mysqli_query($link, $query2);
    mysqli_query($link, $query3);
    mysqli_close($link);    
    echo "<script type='text/javascript'>alert('Запись была успешно произведена!');</script>";
}
else {
    echo "<script type='text/javascript'>alert('Ошибка записи! Специалист не сможет принять Вас в такое время');</script>";     
}
?>

Answer 1

В HTML вызываем асинхронную функцию fetch(), которая отправит значение из <input> в handler.php. Эту переменную для примера я назвал $message. Рекомендую подробнее ознакомиться с fetch.

index.html

<input type="text" id="input">
<button onclick="send('handler.php')">Send</button>
<p>Result:</p>
<p id="result" style="color:red"></p>
<script src="send.js"></script>

handler.php

<?php
header('Content-Type: application/json;charset=utf-8');
$input = file_get_contents("php://input"); // строка, которая прилетела
$array = json_decode($input, true); // кодируется из строки в массив
extract($array);
if (isset($message)) {
    echo json_encode(array(
        'status' => 'ok',
        'message' => $message
    ));
} else {
    echo json_encode(array(
        'status' => 'error'
    ));
}

send.js

async function send(url) {
    let result = document.querySelector('#result')
    let data = {
        message: document.querySelector('#input').value
    }
    console.log(data)
    const response = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=utf-8'
        },
        body: JSON.stringify(data)
    });
    const content = await response.json(); // читаем ответ в формате JSON
    result.innerHTML = `<pre><code>status: ${content.status}\nmessage: ${content.message}</code></pre>`
}

БЛОГ НА HUSL

Отправка переменной из JS-кода в PHP-скрипт

Ответы (1 шт):