关于ajax与springboot的前后端交互，三种完成页面的跳转功能的方法以及登录验证功能_springboot ajax请求跳转

一.ajax的实现

1.ajax的原理介绍

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

2.ajax的实现

jQuery Ajax本质就是 XMLHttpRequest，对他进行了封装，方便调用！
jQuery.ajax()参数介绍：
url:请求地址
type:请求地址,GET,POST(1.9.0之后用method)
data:要发送的数据.使用{可以发送多个数据}
tiemout:设置请求超时时间（毫秒）
success:成功请求发送给服务器，告诉服务器当前客户端可接受的数据类型
error: 失败之后执行的回调函数
dataType:将服务器返回的数据转换为指定类型
“xml”: 将服务器端返回的内容转换成xml格式
“text”: 将服务器端返回的内容转换成普通文本格式
“html”: 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
“script”: 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
“json”: 将服务器端返回的内容转换成相应的JavaScript对象
“jsonp”: JSONP 格式使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
ajax参数还有许多，就不一一介绍了，以上是常用的
样例：

 $.ajax({
            url: "/loginIn",
            type: "GET",
            data:{
                username: username,
                password: password,
            },
            success: function(success){
                // if(success=="success"){
                    // window.location.href="index.html";
                    window.open("/index","_self");
                    // window.open("index.html","_self");
                // }
                // else if(success=="error"){
                //     alert("账号和密码错误");
                // }
            },
            error: function(error){
                alert("网络联通，请检查网络联通");
            }
        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.ajax与springboot的Controller层的交互

    在使用ajax与springboot实现页面的跳转，实现方式有以下几种：
    重点注意：@ResponseBody注解的意义，加该注解意味着不能使用springboot的return功能即通过return实现页面的跳转
1
2

方法一：在后端进行前端登录账户和密码的验证
在Controller层写两个接口，一个使用@RequestMapping(value="/loginIn",method=RequestMethod.GET)和**@ResponseBody**注解负责验证登录的密码和账户的正确性，第二个接口的作用是进行页面的跳转。
注意：必须使用@ResponseBody注解，原因下面会有介绍
后端代码：

 @RequestMapping("/index")
    public String login1(){
        return "index";
    }

    @RequestMapping(value = "/loginIn",method = RequestMethod.GET)
    @ResponseBody
    public String Login(String username,String password) throws IOException {
        if(username.equals("admin")&&password.equals("12345")){
            return "success";
        }
        else{
            return "error";
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 该方法是使用"/loginIn"接口将username和password传到后端，进行验证，传回前端一个参数，进行判断，在使用js中的window.open("/index")调用@RequestMapping("/index")接口实现页面的跳转
1

请记住如果只在@RequestMapping(value = “/loginIn”,method = RequestMethod.GET)接口中返回跳转路径，是不能实现跳转的，因为@ResponseBody注解，返回值会被直接写入 HTTP response body 中，比如异步获取 json 数据，加@ResponseBody 后，会直接返回 json 数据。@RequestBody 将 HTTP 请求正文插入方法中，使用适合的 HttpMessageConverter 将请求体写入某个对象。
前端代码：

function btn(){
        var username= document.getElementById("username").value;
        //获取input标签中的值
        var password =document.getElementById("password").value;
        $.ajax({
            url: "/loginIn",
            type: "GET",
            data:{
                //注意！注意！注意！注意！注意！
                data的参数命名一定要与Controller中的参数命名相同,否则参数无法传到后端
                username: username,
                password: password,
            },
            success: function(success){
                if(success=="success"){
                    // window.location.href="index.html";
                    window.open("/index","_self");
                    // window.open("index.html","_self");
                }
                else if(success=="error"){
                    alert("账号和密码错误");
                }
            },
            error: function(error){
                alert("网络联通，请检查网络联通");
            }
        })
在这里插入代码片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

方法二：在前端判断username和password的正确性，后端的@RequestMapping(value = “/loginIn”,method = RequestMethod.GET)可以随便返回一个值
后端代码：

    @RequestMapping("/index")
    public String login1(){
        return "index";
    }

    @RequestMapping(value = "/loginIn",method = RequestMethod.GET)
    @ResponseBody
    public String Login(String username,String password) throws IOException {
        return "login";
    }
1
2
3
4
5
6
7
8
9
10

前端代码

function fff(){
        var username= document.getElementById("username").value;
        // var password = $("password").val();
        var password =document.getElementById("password").value;
        if(username=="admin" && password=="12345"){
            $.ajax({
                url: "/loginIn",
                type: "GET",
                data:{
                    username: username,
                    password: password,
                },
                success: function(success){
      
                        window.open("/index","_self");
             
                },
                error: function(error){
                    alert("网络联通，请检查网络联通");
                }
            })
        }

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

该方法的原理实在前端进行密码验证，使用window.open()调用@RequestMapping("/index")的接口，

方法三：
在前端完成页面的跳转
该方法使用html的from标签中action参数，让action=”/index"，该方法可以不再使用ajax，直接与后端@RequestMapping("/index")
进行交互
前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册登录界面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container right-panel-active">

    <!-- 登录 -->
    <div class="container_form container--signin">
<!--        注意注意注意-->       
            <form action="/index" class="form">
            <h2 class="form_title">Sign In</h2>
            <input type="username" placeholder="Useranme" id="username" class="input" />
            <input type="password" placeholder="Password" id="password" class="input" />
            <button class="btn" >Sign In1</button>
        </form>
    </div>

<!-- 背景 -->
<div class="slidershow">
    <div class="slidershow--image" style="background-image: url('https://source.unsplash.com/Snqdjm71Y5s')"></div>
    <div class="slidershow--image" style="background-image: url('https://source.unsplash.com/5APj-fzKE-k')"></div>
    <div class="slidershow--image" style="background-image: url('https://source.unsplash.com/wnbBH_CGOYQ')"></div>
    <div class="slidershow--image" style="background-image: url('https://source.unsplash.com/OkTfw7fXLPk')"></div>
</div>
<!-- partial -->
<script src="js/script.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

后端代码：

@RequestMapping("/index")
    public String login1(){
        return "index";
    }
1
2
3
4