Java实现前后端分离登陆，使用jquery，ajax异步发送请求处理json数据

实现页面跳转需要用到jquery的cookie保存用户信息。引入：jquery.cookie.js

我是使用springmvc返回的map类型的json数据，也可以用list集合或者对象

Controller层

package com.it.controller;

import com.it.bean.User;
import com.it.server.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@Controller
public class UserController {
    @Autowired
    UserService userService;
    @Autowired
    HttpServletRequest request;

    @RequestMapping(value = "/login", method = RequestMethod.GET)
    @ResponseBody
    public Map login(User user){
        Map mapmod=new HashMap();
        User user1=userService.findByUsername(user);
        mapmod.put("users",user1);

        return mapmod;
    }
}

index.html

 

跳转后的界面：需要获取到刚刚存入浏览器的cookie在页面上显示

    success




    
    

    
    

补充：

1、遍历一维数组

var arr1=['aa','bb','cc','dd'];
 $.each(arr1,function(i,val){ //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
 console.log(i+'```````'+val);

2、遍历二维数组

var arr2=[['aaa','bbb'],['ccc','ddd'],['eee','fff']];
$.each(arr2,function(i,item){ //两个参数，第一个参数表示下标，第二个参数表示一维数组中的每一个数组
 console.log(i+'````'+item);

3、处理json

var json1={key1:'a',key2:'b',key3:'c'};
 $.each(json1,function(key,value){  //遍历键值对
            console.log(key+'````'+value);
  })

4、当list集合有json对象时

var arr3=[{name:'n1',age:18},{name:'n2',age:20},{name:'n3',age:22}];
        $.each(arr3,function(i,val){
            console.log(i+'`````'+val);   
　　　　//输出
　　　　/* 0`````[object Object] 1`````[object Object] i2`````[object Object]*/
            console.log(val.name); //获取每一个json里面的name值
            console.log(val["name"]);
            $.each(val,function(key,val2){
                console.log(key+'```'+val2);
            })
        });

 

5、当map集合有json对象时

参考正文！！