Отправьте данные формы, используя JavaScript Fetch и POST, а затем обработайте их в PHP

Question

Итак, я хочу создать свою страницу таким образом, чтобы, когда пользователь оставляет комментарий, страница не обновлялась, а комментарий отправлялся и вставлялся в базу данных.

Как таковой Мне нужно отправить сам комментарий на сервер, и я прочитал, что лучший способ сделать это - использовать JavaScript FormData. Проблема в том, что я не могу заставить его что-то отправить, и я хочу это отправить серверу данные, записанные в элементе type = "input". Ранее я делал это, используя способ по умолчанию, предоставленный самим элементом формы HTML: action = link method = "post".

Поэтому я хочу добавить идентификатор кампании в URL и отправить комментарий на сервер с помощью $ _POST и JavaScript DataForm, если это возможно, поэтому он знает кампанию, в которой должен быть этот комментарий.

У меня может быть несколько кампаний, и все они будут генерироваться «динамически», поэтому скажем, с PHP вместе с JavaScript скриптами для управления их поведением, поэтому я повторил все это.

<form id="commentForm' . $row['id'] . '" name="commentForm"  method="post" class="greyContainerAllCampaigns">
<input id="comment' . $row['id'] . '" name="CommentContent" max="250" title="max 250 alphanumeric and ,.?: etc chars" required pattern='.' \'[A-Za-z0-9 .,!?:\[\]()"-+]+\' ' .'class="inputBox" type="text"  placeholder="write here">
<button  id="commentB' . $row['id'] . '" class="submitButton" type="submit"  name="Comment">Comment</button></form>';

Это сценарий JavaScript, который я пытался написать, чтобы сделать это:

          document.getElementById("commentB' . $row['id'] . '").addEventListener("click", commentFunction);

          function commentFunction() {

            fetch(\'http://localhost:80/proiect/GaSM/public/Campaign/comment/'. $row['id'] . '\', {
              method: \'POST\',
              body : new FormData(document.getElementById("commentForm' . $row['id'] . '")),
              headers: {\'Content-Type\':\'multipart/form-data\'}


            });

            alert ("You left a comment!");
          }

    </script>';

Я пытался получить результат на сервере с помощью $ _POST ['CommentContent'], но ничего не получаю, ничего не отправляется.

Я, очевидно, делаю что-то не так с тем, как я пытаюсь отправить его через POST на сервер в сценарии JavaScript, но я не знаю что. Заранее спасибо!

Answer 1

Во-первых, присвойте элементу формы нормальный идентификатор. Не уверен, что вы пытаетесь сделать сейчас, но если вы хотите использовать PHP для его рендеринга, используйте echo между PHP открывающими и закрывающими тегами: id="<?php echo 'commentForm' . $row['id']?>". Как и сейчас, я подозреваю, что ваш Javascript всегда ищет форму с буквенной строкой 'commentForm' . $row['id']'. row['id'] не считается переменной.

Далее, синтаксис этой функции fetch выглядит совершенно недействительным. FormData прекрасно работает с XMLHttpRequest , который, я считаю, именно то, что вы ищете.

Например:

<?php
<script>
    let xhr = new XMLHttpRequest();

    // Your logic for handling the response of the server
    xhr.onreadystatechange = function() {
        if (4 !== this.readyState) {
            // not yet ready
            return;
        }
        if (200 !== this.status) {
            //handle error response
            return;
        }
        // Handle something good...
    }

    xhr.open('POST', 'https://my.page/comment/' + <?php echo $row['id'] ?>);
    xhr.send(new FormData(document.getElementById('myForm')));
</script>
?>

Answer 2

как насчет того, чтобы вы дали форме класс и в javascript добавляете событие в эту форму всякий раз, когда она отправляется, чтобы сделать запрос Ajax к действию формы с сериализованными данными формы.

$(“.form”).on(“submit”, function(e) {
    $form = $(this);
    $.ajax({
        url: $form.attr(“action”),
        type: “post”,
        data: $form.serialize(),
        success: function(res) {
            alert(“success”);
        },
        error: function(error) {
            alert(“error”);
        }
    });
    e.preventDefault();
    return false;
});