javascript - 如何在 php 端回显来自 javascript 的发布数据以进行开发？

Question

我正在使用 Symfony 5，我正在使用 axios 从 javascript 将数据发布到 php 服务器端。出于开发目的，我希望将发布的数据显示在页面上，以便更好地构建和查看它们。

js文件

const onSubmit = () => {
    axios.post('mystuff/post', data)
    .then(response => {
        console.log(response.data)
    })
    .catch(err => {
        console.log(err);
    })
}

php文件

/**
 * @Route("/mystuff/post")
 */
public function postData(Request $request)
{
    $post_data = $request->getContent();
    return new JsonResponse($post_data)
}

上述代码的工作原理是将数据丢回 js 端并在控制台将其注销，但很难在控制台中真正看到它们。所以我想要一些类似在 Controller 中回显数据并将它们显示在页面上的东西。我该怎么做？

Answer 1

我刚找到一个 React 组件 react-json-pretty就是这样做的。我只是传入 json 响应字符串，它会按层次结构顺序对其进行格式化。

js文件

import JSONPretty from 'react-json-pretty';

const App = () => {
    const [jsonString, setjsonString] = useState("");

    const onSubmit = () => {
        axios.post('mystuff/post', data)
        .then(response => {
            setjsonString(response.data);
        })
        .catch(err => {
            console.log(err);
        })
    }

    return(
        <>
            <JSONPretty id="json-pretty" data={jsonString}></JSONPretty>
            <button onClick={onSubmit}>Submit</button>
        </>
    )

}