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

Posted 2023-02-27

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

【英文标题】：Send form data using JavaScript Fetch and POST and then process it in PHP

【发布时间】：2020-07-31 13:22:21

【问题描述】：

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

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

所以我想将广告系列的 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 脚本中的服务器的方式显然做错了，但我不知道是什么。 提前致谢！

【参考方案1】：

首先，给表单元素一个普通的 id。不确定您现在要做什么，但如果您想使用 PHP 来呈现它，请在 PHP 开始和结束标记之间使用echo：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>
?>

【讨论】：

javascript let button = document.getElementById('thatFormButtonId'); button.addEventListener('click', (event) => event.preventDefault(); // insert AJAX code here ); 不确定这是否也会阻止表单本身提交。在这种情况下，您可以执行以下操作：javascript let form = document.getElementById('thatForm'); form.addEventListener('submit', (event) => event.preventDefault(); // insert AJAX code here );

我在这一行的第一种方法出现了一个意外的标识符错误：javascript let button = document.getElementById('commentB1');即使commentB1 是表单提交按钮的ID，那也是我使用chrome devtools/inspect 元素检查它的时候。如果可以的话，我会发送一张图片，这样会更容易说明

在上面的代码中，你给按钮的 ID 是commentB' . $row['id'] . '，这对我来说看起来很容易出错。例如。它的最后一个字符有一个空格，这可能会导致您出现该错误，因为'commentB1' 没有该空格。不过你是对的，如果我们能看到更直观的东西会更容易。

【参考方案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;
);

【讨论】：

最简单的方法是在每个表单中放置隐藏的输入以指示可能通过 id 进行的活动

评论将自动发送，只要它是您表单中的有效表单元素