[技術博客] 如何在前端訪問後端對象的更多數據

咱們最近在作答題功能，有個需求是在前端判斷用戶的答案是否正確。
因爲咱們須要訪問到答案數據，
一種方法是在前端調用使用Ajax到後端獲取數據，代碼以下：

function requestRemoveData() {
    $.ajax({
        url: '<服務器API地址>',
        success: (response) {
            console.log('後端返回的數據:');
            console.log(response);
        }
    });
}

第二種方法是在將數據渲染在html的tag代碼中，而後前端經過Jquery讀取tags信息：

const question = $('span#question').val()

另外一種更加簡單的辦法是在後端渲染html頁面時，直接將題目數據存入頁面的Javascript代碼中。在咱們的SpringBoot項目中，咱們使用的模板引擎是ThemyeLeaf，themeleaf提供方法能夠直接將Java的數據對象轉換成Javascript對象，並渲染進HTML的js代碼中：

<th:block layout:fragment="scripts">
    <script th:inline="javascript">
        const questionDetail = [[${question}]] ;
        console.log(questionDetail);
    </script>
</th:block>

上面的${question}就是java代碼向模板引擎傳遞的Java對象。

上述代碼通過themeleaf渲染後，返回給前端的實際代碼是:

<script>
            const questionDetail = {
                "id":36,
                "title":"怎樣評價日劇《逃避可恥但有用》？",
                "answer":"若是把gakki的顏值下降8分，把平匡的顏值下降4分，那麼他們的生活即是中國最普通不過的呆萌程序員和不受人關注的女孩子。柴米油鹽醬醋茶，女孩子爲了假牙的錢煩惱，男生天天加班到很晚自卑的要命。但由於好看，因此浪漫。顏值改變一切。這個可惡的世界",
                "source":null,
                "tag":null,
                "other":null,
                "hint":null,
                "type":"ANSWER",
            } ;
            console.log(questionDetail);
        </script>

因爲js代碼默認是全局共享變量，所以咱們能夠在任意位置訪問questionDetail對象，是否是特別方便呢？