ajax与thymeleaf分别实现数据传输

小杰笔记篇：

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

Controller层：

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

html：引入引擎

<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--/*@thymesVar id="msg" type=""*/-->
<p th:text="${msg}"></p>
</body>
</html>

第二种方式：ajax：

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

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

第二步：Controller层：

@ResponseBody
@RequestMapping("/jie")
public List<User> ajax2(){
    List<User> 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我这边下载文件导入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.0.js"></script>
</head>
<body>
<input type="button" id="btn" value="获取数据">
    <table width="80%" align="center">
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>编号</td>
    </tr>
    </table>
<table id="con">
</table>
</body>
</html>

JavaScript：

<script>
    $(function () {
        $("#btn").click(function () {
            $.post({
                url:"http://localhost:8080/jie",
               success: function (data) {
                console.log(data)
                var html="";
                for (var i = 0; i <data.length ; i++) {
                    html+= "<tr>" +
                        "<td>" + data[i].id + "</td>" +
                        "<td>" + data[i].name + "</td>" +
                        "<td>" + data[i].tid + "</td>" +
                        "</tr>"
                }
                $("#con").html(html);
            }
        })
    })})
</script>

结果：

 

 小杰笔记记录一下

posted @ 2021-03-22 14:11  小杰i  阅读(232)  评论(0)    收藏  举报