使用 JavaScript Fetch 和 POST 发送表单数据，然后在 PHP 中处理它

Question

所以基本上我想以这样一种方式设计我的页面，当用户留下评论时，页面不会刷新，但评论会被发送并插入数据库。

因此，我需要将评论本身发送到服务器，并且我已经读过最好的方法是使用 JavaScript FormData。问题是我无法让它实际发送一些东西，我想要它将 type="input" 元素中写入的数据发送到服务器。 我之前通过使用 HTML 表单元素本身提供的默认方式来做到这一点：action=link method="post"。

所以我想 append 将活动的 id 发送到 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

你如何给表单一个 class 并在 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;
});

Answer 2

首先，给你的表单元素一个普通的 id。 不确定您现在要做什么，但是如果您想使用 PHP 来渲染它，请在 PHP 开始和结束标签之间使用echo ： id="<?php echo 'commentForm'. $row['id']?>" . 就像现在一样，我怀疑您的 Javascript 一直在寻找带有文字字符串'commentForm'. $row['id']' 'commentForm'. $row['id']' 。 row['id']不被视为变量。

接下来，这个fetch function 的语法看起来完全无效。 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>
?>