ajax的使用 - JAVA学习网

一：简介：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二：代码实现：

（1）前端页面：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <title>注册界面</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script th:src="@{https://code.jquery.com/jquery-3.3.1.min.js}"></script>
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>
    <script th:src="@{css/asserts/js/jquery.serializejson.js}"></script>

</head>
<style>
    .di {
        margin-top: 300px;
        margin-left: 500px;
        width: 500px;
        height: 300px;
    }
</style>

<body>
<div class="di">
    <form  id="demo" >
        <div class="form-group">
            <input id="name" type="text" name="username" class="form-control" placeholder="输入用户名"><br>
            <input id="in" type="text" name="password" class="form-control" placeholder="输入密码"><br>
            <!--                <input id="in1" type="text" name="password1" class="form-control" onblur="a()" placeholder="重新输入密码">-->
            <span id="sp"></span>
        </div>
        <input type="button" onclick="login()" value="登录" />
    </form>
</div>
</body>
</html>

（2）：js

    <script>
        function login ()
        {
            var json=$("#demo").serializeJSON();
            var jsonString = JSON.stringify(json);;
            $.ajax({
                    contentType: 'application/json; charset=utf-8',
                    type:'post',
                    url:'/register',
                    data:jsonString,
                    success:function(data){
                        alert("success!!!");
                    },
                    error:function(e){
                        alert("error!!!");
                    },
                }
            )
        }
    </script>

（3）后台响应（springboot）：

@RequestMapping("/register")
@ResponseBody
public String register(@RequestBody User user) {
    System.out.println("进入注册用户密码的方法");
    if(userService.save(user)){
        System.out.println("成功");
        return "login";
    }else {
        return "register";
    }
}

JAVA学习网

分类