[技术博客] 如何在前端访问后端对象的更多数据

咱们最近在作答题功能，有个需求是在前端判断用户的答案是否正确。
因为咱们须要访问到答案数据，
一种方法是在前端调用使用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对象，是否是特别方便呢？