Как передать данные из js в php?

Question

[Алексей]

данные не из формы не передается в php
В чем ошибка?
Спасибо

<div id="welcome">
    <label for="name">Имя:</label>
    <input type="text" id="name" placeholder="Например, Иван">
    <button id="send">Отправить</button>
  </div>
 
<script>
//после загрузки DOM-дерева страницы
document.addEventListener("DOMContentLoaded",function() {
  //получить кнопку
  var mybutton = document.getElementById('send');
  //подписаться на событие click по кнопке и назначить обработчик, который будет выполнять действия, указанные в безымянной функции
  mybutton.addEventListener("click", function(){
    //1. Сбор данных, необходимых для выполнения запроса на сервере
    var name = document.getElementById('name').value;
    //Подготовка данных для отправки на сервер
    //т.е. кодирование с помощью метода encodeURIComponent
    name = 'nameUser=' + encodeURIComponent(name);
    // 2. Создание переменной request
    var request = new XMLHttpRequest();
    // 3. Настройка запроса
    request.open('POST','/wp-content/kalkulatory/processing.php',true);
    // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции
    request.addEventListener('readystatechange', function() {
      //если запрос пришёл и статус запроса 200 (OK)
      if ((request.readyState==4) && (request.status==200)) {
        // например, выведем объект XHR в консоль браузера
        console.log(request);
        // и ответ (текст), пришедший с сервера в окне alert
        console.log(request.responseText);
        // получить элемент c id = welcome
        var welcome = document.getElementById('welcome');
        // заменить содержимое элемента ответом, пришедшим с сервера
        welcome.innerHTML = request.responseText;
      }
    });
    // Устанавливаем заголовок Content-Type(обязательно для метода POST). Он предназначен для указания кодировки, с помощью которой зашифрован запрос. Это необходимо для того, чтобы сервер знал как его раскодировать.
    request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 5. Отправка запроса на сервер. В качестве параметра указываем данные, которые необходимо передать (необходимо для POST)
    request.send(name);
  });
});
</script>

<?php
    $output = 'Здравствуйте, пользователь! ';
    $output .= $_POST['name'];

    if ($_SERVER['REMOTE_ADDR']) {

      $output .= 'Ваш IP адрес: '. $_SERVER['REMOTE_ADDR'];
    }
    else {
     $output .= 'Ваш IP адрес неизвестен.';
    }
    echo $output;

Answer 1

[mt. NATS]

а где теги form
div на form поменяй

---

xhr = new XMLHttpRequest();
function getXMLHttp() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    return new ActiveXObject('Microsoft.XMLHTTP');
}

---

если не из формы, то можно так:

function request(href, obj) {
    event.preventDefault();
    xhr = getXMLHttp();
    let formdata = new FormData(obj);
    xhr.open('POST', href, true);
    xhr.send(obj);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            alert(xhr.response);
        }
    }
}

передаешь в ф-цию адрес обработчика и объект с данными
событие можно повесить на onclick например на кнопку

---

с формой можешь вот этот использовать

function sender(form, callback){
    let data = new FormData(form);
    xhr = getXMLHttp();
    xhr.open('POST', form.action, true);
    xhr.send(data);
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4) {
            console.log(xhr.response);
            if(callback){ 
                 callback(xhr.response); 
             }
        }
    };
    return false;
};

на событие submit тега формы вешаешь, как-то так

<form method='post' action='...' onsubmit='sender(this); return false;' >
...
</form>

опционально можешь передать вторым параметром callback

Comments

[Алексей]

C form вообще не работает

[mt. NATS]

Алексей selftrips.ru, все должно работать!

[Алексей]

mt. NATS, можете внести изменения в исходный код?
(вариант без form)
Спасибо

[mt. NATS]

Алексей selftrips.ru, на платной основе ;)))