在使用JavaScript Fetch()时显示PHP验证错误

Question

我想输出一个错误消息，工作在PHP的后端，而使用JavaScript fetchAPI在前端。这里有一个非常类似的问题:使用JavaScript Fetch API时输出PHP表单验证错误消息，但我认为由于该问题中的代码量，该问题看起来比实际情况更令人生畏。看起来这个人在做和我一样的教程。

在我的情况下(在使用JSfetch()之前)，如果PHP验证中有错误，错误消息将以以下代码在屏幕上显示:

<?php 
if(isset($error)) {
foreach($error as $errorMessage) {
echo "<p>You have an error: {$errorMessage}</p>";
}
}
?>

表单处理的简化版本是:

<?php
// note $postTitle is a variable given to the title of a post submitted via an HTML form
if(!preg_match('/^[a-zA-Z0-9s]+$/', $postTitle)) {
$error[] = "Post Title can be letters and numbers only";
}
// if no errors process submission
if (!isset($error)) {
try {
// PDO prepared statements that update the database with article/post information

} catch (PDOException $e) {
echo "There is an error: " . $e->getMessage();
}
}
?>

Javascript是:

var forms = document.querySelectorAll('form'),
forms.forEach(item => {
item.addEventListener("submit", function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch("news-posts.php", {
method: 'post',
body: formData
}).then(function(response){
return response.text();
}).then(function(data){
console.log(data);
}).catch(function (error){
console.error(error);
})
item.remove();
})
})

问题是，虽然错误处理仍然在后端按预期工作，你如何在前端输出错误消息，现在它使用JS Fetch()方法?

Answer 1

你需要一种方法让JS知道它何时接收到错误。理想情况下，你的后端会返回一个与错误相关的http状态码，你可以在前端检查这个。

后端:

if (isset($error)) {
header('400 Bad Request');
// output errors here
}

前端:

fetch("news-posts.php", {
method: 'post',
body: formData
}).then(function(response) {
if (!response.ok) {
// handle errors here
}
});

另外，你可能想以json格式输出错误，并在JS中循环它们。您不需要为每个错误输出像<p>这样的标记，只需要输出数据。这些标签可以由JS自己动态添加。

下面的示例遍历一个data对象，为每个项目创建一个<p>元素，并将它们附加到id为error:

的div中

let errorElement = document.querySelector('#error');
for (let error of data.errors) {
let listItem = document.createElement('p');
listItem.textContent = error.message;
errorElement.appendChild(listItem);
}

你应该能够修改这些例子来满足你的需要。