15_JSON springboot

1.StudentController加入以下三个方法。记得StudentController上加入@RestController，要不然会出现跳转问题

@GetMapping("/student")
public List<Student> listStudent(@RequestParam(value = "start", defaultValue = "0") int start,@RequestParam(value = "size", defaultValue = "5") int size) throws Exception {
    start = start<0?0:start;
    PageHelper.startPage(start, size, "stuid desc");
    List<Student> stu = studentMapper.findAll();
    PageInfo<Student> page = new PageInfo<>(stu);
    return page.getList();
}

@GetMapping("/student/{stuId}")
public Student getStudent(@PathVariable("stuId") int stuId) throws Exception {
    Student s= studentMapper.get(stuId);
    System.out.println(s);
    return s;
}
@PutMapping("/student")
public void addStu(@RequestBody Student student) throws Exception {
    System.out.println("springboot接受到浏览器以JSON格式提交的数据："+student);
}

2.submit.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用AJAX以JSON方式提交数据</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form >
    stuId：<input type="text"  /><br/>
    名称：<input type="text" /><br/>
    性别：<input type="text" /><br/>
    <input type="button" value="提交" >
</form>
<div ></div>

<script>
    $('#sender').click(function(){
        var stuId=document.getElementById('stuId').value;
        var name=document.getElementById('name').value;
        var sex =document.getElementById('sex').value;
        var student={"name":name,"sex":sex,"stuId":stuId};
        var jsonData = JSON.stringify(student);
        var page="student";

        $.ajax({
            type:"put",
            url: page,
            data:jsonData,
            dataType:"json",
            contentType : "application/json;charset=UTF-8",
            success: function(result){
            }
        });
        alert("提交成功，请在springboot控制台查看服务端接收到的数据");

    });
</script>
</body>

</html>

3.getOne.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用AJAX以JSON方式获取数据</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过AJAX获取一个Hero对象---" >

<div ></div>

<script>
    $('#sender').click(function(){
        var url="student/10";
        $.get(
            url,
            function(data) {
                console.log(data);
                var json=data;
                var name =json.name;
                var stuId = json.stuId;
                var sex = json.sex;

                $("#messageDiv").html("分类id："+ stuId + "<br>分类名称:" +name+"<br>性别："+sex);

            });
    });
</script>
</body>

</body>
</html>

4.getMany.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>用AJAX以JSON方式获取数据</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="通过AJAX获取多个分类对象" >

<div ></div>

<script>
    $('#sender').click(function(){
        var url="student?start=0&size=100";
        $.get(
            url,
            function(data) {
                var students = data;
                for(i in students){
                    var old = $("#messageDiv").html();
                    var student = students[i];
                    $("#messageDiv").html(old + "<br>"+student.stuId+"   -----   "+student.name+" -----   "+ student.sex);
                }
            });
    });
</script>
</body>

</body>
</html>

5.运行，记得html放在webapp目录下

http://localhost:8080/submit.html

http://localhost:8080/getOne.html

http://localhost:8080/getMany.html

ps.出现的问题：

1.使用的@Controller，而不是@RestController，导致链接跳转出现问题

相关推荐