ajax的使用
一：简介：
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";
}
}
