【javaweb】学习日记Day3 - Ajax 前后端分离开发 入门

// 假设我们已经有了一个User对象和对应的UserController
// 以下是UserController中的一个简单的Ajax接口示例
 
// 查询用户信息
@RequestMapping(value = "/getUser", method = RequestMethod.GET)
public @ResponseBody User getUser(@RequestParam("userId") Long userId) {
    // 假设我们有一个查询用户信息的服务方法
    User user = userService.getUserById(userId);
    return user;
}
 
// 前端JavaScript代码片段，使用jQuery发起Ajax请求
$(document).ready(function() {
    $('#getUserButton').click(function() {
        var userId = $('#userIdInput').val();
        $.ajax({
            url: '/getUser',
            type: 'GET',
            data: { userId: userId },
            success: function(data) {
                // 请求成功后的回调函数，data是后端返回的User对象JSON数据
                console.log('用户信息:', data);
                // 这里可以根据返回的数据更新页面内容
            },
            error: function(error) {
                // 请求失败的回调函数
                console.error('请求出错:', error);
            }
        });
    });
});

这个代码示例展示了如何在后端创建一个简单的Ajax接口，并在前端使用jQuery发起Ajax请求并处理响应。这是前后端分离开发中一个常见的模式。