ajax与thymeleaf分别实现数据传输

小杰笔记篇：

1:第一种：利用Model和thymeleaf引擎来完成：

Controller层：

@CrossOrigin//解决跨域问题
@Controller
public class UserController {
@Autowired
private UserMapper userMapper;
@RequestMapping({"/","/index"})
public String queryUserList(Model model){
    List users = userMapper.queryList();
    model.addAttribute("msg",users);
    return "index";
}

html：引入引擎

第二种方式：ajax：

第一步：创建User实体类假装数据库里面的数据：

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private Integer id;
    private String name;
    private Integer tid;
}

第二步：Controller层：

@ResponseBody
@RequestMapping("/jie")
public List ajax2(){
    List list=new ArrayList<>();
    list.add(new User(1,"杰",5));
    list.add(new User(2,"杰",6));
    list.add(new User(3,"杰",7));
    list.add(new User(4,"杰",8));
    return list;
}

第三步：编写html：Jquery我这边下载文件导入

    
    
    



    

    

        
id
        
姓名
        
编号
    
    

JavaScript：

结果：

 小杰笔记记录一下