从专科一直想了解Ajax，Cookie相关技术，直至毕设开发项目，终于了解了一遍，故作此文，作为记录，又可以作为新手入门的简单了解。
首先我们看一看前端页面的form表单：
<div class="form-signin text-center">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputUserName" class="sr-only">用户名</label>
<input type="email" id="inputUserName" class="form-control s-margin-2" placeholder="用户名" required autofocus>
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" class="form-control s-margin-1" placeholder="密码" required>
<button class="btn btn-lg btn-primary btn-block s-margin-2" onclick="userLogin()">登录</button>
<button class="btn btn-lg btn-default btn-block s-margin-2" onclick="toRegister()">注册</button>
</div >
下面是JS代码：
function userLogin() {
var user = {};
user.userName = document.getElementById("inputUserName").value;
user.userPassword = document.getElementById("inputPassword").value;
var response;
$.ajax({
async : false,//发送同步请求
type : 'POST', //请求方式为post
url : address+"userLogin", //发送请求的地址。
data : user, //发送到服务器的数据
dataType : 'json',//预期服务器返回的数据类型
success : function(result) {
response = result;
},
error : function(result) {
alert('服务器异常');
}
});
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
}
我们想要完成的功能是通过Ajax验证登录表单，并设置Cookie
下面，我们用蓝色文字，记录整个代码执行的过程
1.通过点击登录按钮，触发"userLogin()" 函数
2.执行JS中"userLogin()" 函数
3.获取用户名，密码中输入的数据，存入user变量
4.进行ajax进行前后端交互
5.通过设置的参数,依据url的路径把data中的数据传送过去
下面介绍列举ajax常见参数
我们接着往下看，大家先看代码，再看步骤分析
UserController.java
/**
* 用户登录
* @param userName
* @param userPassword
* @return
*/
@PostMapping(value = "/userLogin")
public Response userLogin(@RequestParam("userName")String userName,
@RequestParam("userPassword")String userPassword){
return userService.userLogin(userName,userPassword);
}
}
6.后端依据url路径，匹配相应的Controller
7.进入userLogin方法，参数接收ajax传入的值
8.调用UserService中userLogin方法,该方法由UserServiceImpl实现
UserService:
import com.leaveword.utils.Response;
public interface UserService {
Response getUser(Integer userId);
Response userRegister(String userName,String userPassword);
Response userLogin(String userName,String userPassword);
}
展示UserServiceImpl代码：
@Override
public Response userLogin(String userName, String userPassword) {
//判断是否输入
if(CommonTools.isEmpty(userName))
return new Response("-1","用户名不能为空");
if(CommonTools.isEmpty(userPassword))
return new Response("-1","用户密码不能为空");
//判断数据库是否存在
User user = userRepository.findByUserName(userName);
if(user != null){
if(user.getUserPassword().equals(userPassword)) {
user.setUserPassword("");
return new Response("0", JSON.toJSONString(user));
}
else
return new Response("-1","密码错误");
}
else
return new Response("-1","用户不存在");
}
9.通过CommonTools类中的isEmpty方法，判断输入框是否输入
这里记住，若如果查询成功，Response里两个参数,第一个赋值为0， 第二个赋值为user转换的JSON数据
展示CommonTools代码：
import java.sql.Timestamp;
public class CommonTools {
public static boolean isEmpty(String str){
if(str == null)
return true;
if(str.isEmpty())
return true;
if(str == "" || str.equals(""))
return true;
return false;
}
public static Timestamp getCurrentTime(){
return new Timestamp(System.currentTimeMillis());
}
}
10.再userRepository查询数据库是否存在页面传过来的的用户名，密码
UserRepository：
import org.springframework.data.jpa.repository.JpaRepository;
public interface UserRepository extends JpaRepository<User,Integer> {
User findByUserName(String userName);
}
11.把结果返回Response类型的response变量
Response:
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Response {
private String status;
private Object content;
}
注意：resonse变量现在已经获得两个值，标识符：status和内容：content,把该变量从Service,Controller依次返回，最终响应给前端Ajax中
12.前端页面Ajax通过获得结果，
如请求成功，赋值给success : function(result) 中的result，再赋值给前端 response变量
如请求失败，弹出提示框 alert('服务器异常')，提示服务器异常
下面讲解如何设置cookie
我们再把前端js代码中设置cookie的代码放一下
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
我们知道，如果ajax中post请求成功，会在response带进两个变量，成功会
13.判断response.status是否为0
若不为0，则把此时的content放在提示框中 显示
若为0，则代表请求确实成功了，随后，调用util.js中的 setCookie（）方法
setCookie()具体方法定义再util.js中，下面展示util.js代码
function setCookie(name, value, days) {
var d = new Date;
d.setTime(d.getTime() + 24*60*60*1000*days);//设置Cookie保存的时间
window.document.cookie = name + "=" + value + ";path=/;expires=" + d.toGMTString();
var strCookie=window.document.cookie;
alert("function setCookie里"+strCookie);//弹窗提示
}
14.调用setCookie（）赋值
下面介绍Cookie常见参数
接下来，我们详细说明一下setCookie()函数里代码的意思。
d.setTime(d.getTime() + 2460601000days)：
- d. getTime(): 得到d这个时间点以毫秒为单位的时间（也就是说从1970年1月1日0点0分0秒到d这个时间点所经过的毫秒数，计算机一般设定1970年1月1日0点0分0秒是最初始时间）
2460601000days:24（一天24小时）*60（一小时60分钟）*60（一分钟60秒）*1000（一秒1000毫秒）*days得到的是days天对应的毫秒数。 - d.setTime(d.getTime() + 2460601000days) :相加得到过期日期对应的毫秒数，然后使用d.setTime()方法赋值到d这个对象中。
这里我们把cookie保存在1天
window.document.cookie = name + “=” + value + “;path=/;expires=” + d.toGMTString()
- d.toGMTString()：表示该日期会在转换为字符串之前由本地时区转换为 GMT 时区。
window.document.cookie = 表示给cookie赋值，赋是什么样值呢？在该域名的所有子域有效的，保存时间为1天的，格式为”name=value"的值。
我们再放一下前端JS代码，以便更好的讲解
if(response.status == "0"){
setCookie("user",response.content,1);
window.location.href=address+"words.html";
}
else{
alert(response.content);
}
15.设置完Cookie之后，页面将进行跳转，完成登录功能
总结：
1.ajax请求：通过ajax设置的参数，向后端发送数据，在对应的函数内完成校验，结果 返回给前端，实现反馈
2.设置Cookie:当登录校验完成，调用setCookie()方法，按照cookie相应的条件参数，进行设置
