时间戳

首页 > 解决方案 > 使用 JavaScript Fetch API 时输出 PHP 表单验证错误消息

javascript - 使用 JavaScript Fetch API 时输出 PHP 表单验证错误消息

问题描述

我有一个包含多个表单的页面，每个表单在后端使用 PHP 处理，将数据发送到 MySQL 数据库，但在前端它使用 Javascript 的 fetchAPI 来防止在表单实例完成时刷新页面和数据被发送到数据库。

我有一些 PHP 服务器端验证在不将数据发送到数据库方面仍然有效，尽管在提交时完成的表单实例确实从页面中消失（由于下面显示的 javascript），但重新出现如果验证失败，则刷新时。

下面的主要代码示例包括这个通常会输出错误消息的代码块：

<?php 
    // echo form validation error messages
    if(isset($error)) {
        foreach($error as $msg) {
            echo "<p>** {$msg}</p>";
        }
    }
?>

就输出这些错误消息而言，是否仍然可以使用这个 PHP 代码（目前不工作），或者现在我将 javascript fetchAPI 与 PHP 结合使用，我是否还必须在 JavaScript 中编写验证以输出错误前端，除了安全地防止表单验证失败的 PHP 之外？需要注意的是，页面上有多个表单实例，它们通过while循环输出，每个实例都与特定的帖子相关。

<?php
if(isset($_POST['upload-submit'])) {
    // note $imageTitle is a variable given to the title of a post submitted via an HTML form

    if(!preg_match('/^[a-zA-Z0-9\s]+$/', $imageTitle)) {
        $error[] = "Post Title can be letters and numbers only";
    }

    if(empty(trim($imageTitle))){
        $error[] = "Image Title cannot be blank";
    }

    // if no errors process submission
    if (!isset($error)) {

        try {

        // PDO prepared statements that update the database
    
        } catch (PDOException $e) {
            echo "There is an error: " . $e->getMessage();
        }

    }
}
?>

这里还有适用于页面的 javascript fetchAPI 代码。

var forms = document.querySelectorAll('.image-upload-details-form'),

forms.forEach(item => {
    
        item.querySelectorAll('[type="submit"], button').forEach(button => {
            button.addEventListener("click", e => item._button = button); //store this button in the form element
        })

        item.addEventListener("submit", function(evt, btn) {

            evt.preventDefault();

            const formData = new FormData(this);
            if (this._button) //submitted by a button?
            {
            formData.set(this._button.name, this._button.value);
        }

        fetch("upload-details.php", {
            method: 'post',
            body: formData
        }).then(function(response){
            return response.text();
        }).then(function(text){
            console.log(text);
        }).catch(function (error){
            console.error(error);
        })

        // removes form when submitted
        item.remove();

    })

})

非常感谢您的任何帮助/建议。

标签： javascriptphpvalidationfetch-api

解决方案

首先你没有给出完整的 php 函数代码 post 方法。

您必须在 php 中编写正确的代码，这样才能正确响应 ajax 调用，如下所示

<?php
  if (isset($_POST['username'])) {
  // do user authentication as per your requirements
  // ...
  // ...
  // based on successful authentication
    echo json_encode(array('success' => 1));
  } else {
    echo json_encode(array('success' => 0));
 }

之后，您必须在 javascript 中添加代码以根据您的 php 响应处理错误和成功。

function(response)
{
    var jsonData = JSON.parse(response);

    // user is logged in successfully in the back-end
    // let's redirect
    if (jsonData.success == "1")
    {
        location.href = 'my_profile.php';
    }
    else
    {
        alert('Invalid Credentials!');
    }
}

这是 ajax 调用请求的正确方法。为此使用正确的代码，您的问题将解决

推荐阅读