json_encode() 数据自动转换为 Javascript 对象，无需使用 JSON.parse()

Question

我有一些 PHP 和 JavaScript，它们通过 PHP 更新 MySQL 数据库，然后使用 JavaScript fetch()方法将更新的代码输出回页面而无需硬刷新。 这段代码有效，但有一部分我不明白——为什么在使用json_encode() PHP 方法时，它将数据转换为 JSON 字符串，然后在 JavaScript 中使用它时会自动被转换进入一个没有使用JSON.parse()的 JavaScript 对象？

在 Javascript 中，当我使用JSON.parse()时，它可以理解地抛出一个错误，因为数据不是字符串（最初引起了一些混乱），当我控制台记录 JavaScript 中使用的json变量时，它确实返回了一个JavaScript 对象，我可以在其中访问其属性和方法等。

页面（或网站）上没有使用其他JSON或json_encode() )。

同样在 PHP 脚本中，它使用echo json_encode($board_row);显 JSON。 从数据库中获取数据时，在输出任何 HTML 内容之前。 当我尝试在 HTML 中回显它以查看json_encode($board_row);的值时它只是输出单词false 。 我也不明白那里发生了什么？

如果我在 HTML 中手动添加一个简单的数组，例如$arr = array('a' => 1, 'b' => "hello", 'c' => null); 然后用echo json_encode($arr);在 HTML 中回显它除非它输出一个 JSON 字符串。

如果有人可以解释为什么会发生这种情况，那就太好了。

PHP

if (isset($_POST['submit-board-name'])) {

    $create_board_name = $_POST['create-board-name'];
    
    try {
        // insert into database
        $createBoardSQL = "
            INSERT INTO boards (board_name, user_id) 
            VALUES (:board_name, :user_id )
        ";
    
        $bstmt = $connection->prepare($createBoardSQL);
        $bstmt->execute([
            ':board_name' => $create_board_name,
            ':user_id' => $db_id
        ]);

        // ----- fetch as JSON
        if(isset($_POST['json_response'])) {
            $board_stmt = $connection->prepare("
                SELECT * FROM `boards` WHERE `user_id` = :user_id 
                AND `board_name` = :board_name 
                ORDER BY `board_id` DESC");

            $board_stmt -> execute([
                ':user_id' => $db_id,
                ':board_name' => $create_board_name
            ]); 

            $board_row = $board_stmt->fetch();

            header('Content-type: application/json');
            echo json_encode($board_row);
            exit;
        }

    } catch(PDOException $e) {
        echo "Error: " . $e->getMessage();
    }
}

JavaScript

let boardModuleForm = document.querySelector('.board-module-form');

// URL details
let myURL = new URL(window.location.href),
pagePath = myURL.pathname;

if (boardModuleForm) {
    boardModuleForm.addEventListener('submit', function (e) {
    if (e.submitter && e.submitter.classList.contains('js-fetch-button')) {
            e.preventDefault();

            var formData = new FormData(this);

            formData.set(e.submitter.name, e.submitter.value);
            formData.set('json_response', 'yes');

            fetch (pagePath, {
                method: 'post',
                body: formData
            })
            .then(function(response) {

                if (response.status === 200) {
                    response.json().then(function(json){
                        
                        const newBoardName = json.board_name,
                        boardId = json.board_id;
                            
                        const newButton = `
                        <button name="board-name" type="submit">
                            <span>${newBoardName}</span>
                            <span style="margin:0" class="add-icon flex">+</span>
                        </button>
                        <input class="board-id-value" type="hidden" value="${boardId}">
                        `
                        // add new button from above onto page
                        document.querySelector('.board-list').insertAdjacentHTML('afterbegin', newButton);
                    
                    });

                }

            })
            .catch(function(error) {
                console.error(error);
            })

        }

    })
}

Answer 1

在fetch响应的处理程序中，您调用response.json().then(...) 。 这已经为您进行 JSON 解析，无需手动调用JSON.parse 。