java web SpringMVC后端传json数据到前端页面实例代码-Java开发

下面我将详细讲解“java web SpringMVC后端传json数据到前端页面实例代码”的攻略，包含以下内容：

下面我将详细讲解“java web SpringMVC后端传json数据到前端页面实例代码”的攻略，包含以下内容：

前置条件
后端代码实现
前端页面代码实现
示例说明

1. 前置条件

首先需要确保你已经安装好了JDK和SpringMVC框架，并且对于前端页面的开发，需要掌握HTML、CSS、JavaScript等技术。

2. 后端代码实现

下面我们以一个简单的用户信息管理系统为例，来实现SpringMVC后端传json数据到前端页面的功能。

我们先定义一个User类，包含用户的id和name属性：

public class User {
    private int id;
    private String name;

    // getter and setter methods
}

然后，我们定义一个UserController类，其中定义了一个getAllUsers方法，用于获取所有用户信息：

@Controller
public class UserController {

    @RequestMapping("/users")
    @ResponseBody
    public List<User> getAllUsers() {
        // 模拟数据库查询所有用户信息
        List<User> userList = new ArrayList<User>();
        User user1 = new User();
        user1.setId(1);
        user1.setName("张三");
        User user2 = new User();
        user2.setId(2);
        user2.setName("李四");
        userList.add(user1);
        userList.add(user2);
        // 返回用户列表数据，以json格式返回
        return userList;
    }

}

可以看到，我们使用@ResponseBody注解，将返回的结果序列化成json格式返回给前端页面。

3. 前端页面代码实现

接下来，我们要在前端页面中调用后端获取用户列表信息的接口，并将该数据渲染到页面。

HTML代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户信息列表</title>
    <!--引入jQuery和underscore库-->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/underscore.js/1.9.1/underscore-min.js"></script>
</head>
<body>
    <table id="userTable">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        $(function(){
            // 获取用户信息列表
            $.ajax({  
                url: "/users",  
                type: 'GET',  
                dataType: 'json',  
                success: function(data){  
                    // 使用underscore模板引擎渲染用户列表
                    var userTpl = _.template('<% _.each(users, function(user){ %><tr><td><%- user.id %></td><td><%- user.name %></td></tr><% }); %>');
                    var userHtml = userTpl({users: data});
                    $('#userTable tbody').html(userHtml);
                }  
            }); 
        });
    </script>
</body>
</html>

JavaScript代码中，我们使用jQuery的ajax请求获取后端数据，并使用underscore.js模板引擎来渲染用户列表。