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

Posted 2021-12-23 mizhiniurou

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