Отправить PHP POST, используя Javascript AJAX

Question

Мои данные не вставляются в базу данных, я получаю пустой ответ из журнала консоли и сети.Я вроде как потерял мой исходный код javascript, смешанный с другими ответами о переполнении стека, а также с моим PHP-кодом.

<form id="requestForm">
    <input type="text" name="fName" id="name">
    <input type="text" name="fAddress" id="address">
    <input type="text" name="fComment" id="comment">

    <input type="submit" value="Submit" name="nameSubmit">
</form>

<script>
        document.querySelector('#requestForm').addEventListener('submit', postRequest);

        function postRequest(e){
            e.preventDefault();

            const params = {

                fName: document.querySelector('#name').value,
                fAddress: document.querySelector('#address').value,
                fComment: document.querySelector('#comment').value,

            };
            var xhr = new XMLHttpRequest();
            xhr.open('POST', 'addRequest.php', true);
            xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhr.onload = function(){
                console.log(this.responseText);
            }
            xhr.send(params);
        } 
    </script>
</body>

Вот код PHP:

require_once 'Database.php';

var_dump($_POST); // returns `array(0) {}`

    if (isset($_POST['nameSubmit'])) {
var_dump($_POST); // shows no response    
        $r = $_POST['fName'];
        $o = $_POST['fAddress'];
        $p = $_POST['fComment'];

        $query = "INSERT INTO user_request(name, address, comment) VALUES(?,?,?)";
        $stmt = $db->prepare($query);
        $insert = $stmt->execute([$r, $o, $p]);

        if($insert){
            echo 'Success';
        }else{
            echo 'Error';
        }
    }

Answer 1

Две проблемы:

1.) Параметры отправляются неправильно / вовсе из-за отсутствия сериализации .Когда вы используете тип содержимого формы, ваш объект params должен иметь определенный формат name=value&name2=value2.Таким образом, для облегчения этого вам нужно преобразовать ваш объект, используя что-то вроде:

function getReadyToSend(object) {
    var objList = [];
    for (var prop in object) {
        if (object.hasOwnProperty(prop)) {
            objList.push(encodeURI(prop + '=' + object[prop]));
        }
    }
    return objList.join("&");
}

Таким образом, ваша отправка становится: xhr.send(getReadyToSend(params));

2) Ваш php ожидает отправки кнопки отправки.if (isset($_POST['nameSubmit'])) { У вас нет отправляемой переменной с именем nameSubmit, вы можете исправить это, либо включив ее, либо проверив, что вместо нее установлена ​​каждая переменная.Я бы предложил последнее таким образом, чтобы вы могли обрабатывать ошибки, если 1 или более не пропущены.

Предложение: обновите свою загрузку, чтобы проверить статус:

if (xhr.status === 200)
{
    console.log(xhr.responseText);
}
else if(xhr.status !== 200)
{
    console.log('Request failed.  Returned status of ', xhr.status);
}

Пример скрипта: http://jsfiddle.net/qofrhemp/1/, откройте вкладку сети и проверьте вызов, теперь вы увидите параметры в данных формы длявызов, который срабатывает при нажатии кнопки "Отправить".

Answer 2

Я полагаю, что пост-параметр nameSubmit не существует.
Используйте функцию var_dump() для дампа всего $_POST
С моей точки зрения, единственным заданным параметром был

• fName
• fAddress
• fComment

Почему бы вместо этого не проверить метод запроса?
Это лучше, чем проверка, существует ли переменная или нет.Вы можете проверить необходимые параметры позже, когда убедитесь, что это запрос POST.

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    // Do whatever you want when POST request came in
}

ОБНОВЛЕНИЕ:
Вот ответ, который вы хотели!

<form id="requestForm">
    <input type="text" name="fName" id="name">
    <input type="text" name="fAddress" id="address">
    <input type="text" name="fComment" id="comment">

    <button onclick="sendData();" type="button">Submit</button>
</form>

<div id="testdiv"></div>

    <script>

      function sendData(){
          var data = new FormData();
          data.append('fName', document.getElementById("name").value);
          data.append('fAddress', document.getElementById("address").value);
          data.append('fComment', document.getElementById("comment").value);

          var xhr = new XMLHttpRequest();
          xhr.open('POST', 'test.php', true);
          xhr.onload = function () {
            if(xhr.status !== 200){
              // Server does not return HTTP 200 (OK) response.
              // Whatever you wanted to do when server responded with another code than 200 (OK)
              return; // return is important because the code below is NOT executed if the response is other than HTTP 200 (OK)
            }
            // Whatever you wanted to do when server responded with HTTP 200 (OK)
            // I've added a DIV with id of testdiv to show the result there
            document.getElementById("testdiv").innerHTML = this.responseText;
          };
          xhr.send(data);
      }

    </script>
</body>

Код PHP:

<?php

if($_SERVER['REQUEST_METHOD'] === 'POST'){
    var_dump($_POST);
}else{
    header('HTTP/1.0 403 Forbidden');
}

?>

Чтобы добавить другое поле, добавьте еще одну data.append функцию ниже data var.
Кнопка отправки ДОЛЖНА БЫТЬ ЩЕЛЧЕНА.Чтобы разрешить использование ввода, добавьте слушатель событий для него!.
Как это выглядит на моем конце: https://image.ibb.co/gfSHZK/image.png
Надеюсь, это ответ, который вы хотели.