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

最新推荐文章于 2022-08-22 11:43:56 发布

Exception.

最新推荐文章于 2022-08-22 11:43:56 发布

阅读量989

点赞数 2

分类专栏： java学习笔记文章标签： jquery ssm java ajax

本文链接：https://blog.csdn.net/qq_43122641/article/details/102691514

版权

java学习笔记专栏收录该内容

57 篇文章 1 订阅

订阅专栏

实现页面跳转需要用到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<String,Object> login(User user){
        Map<String,Object> mapmod=new HashMap<String, Object>();
        User user1=userService.findByUsername(user);
        mapmod.put("users",user1);

        return mapmod;
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="static/jquery-2.1.1.min.js"></script>
    <script src="static/jquery.cookie.js"></script>

</head>
<body>
    <input type="text"  name="username" id="username">
    <input type="text"  name="password" id="password">
    <input type="button" value="登陆" id="login">
    <div id="ajaxdiv">

    </div>
</body>
<script type="text/javascript">


    $(function () {
        $("#login").click(function () {
            // var password=$("#password").val();
            // var username=$("#username").val();
            var data1={
                "username":$("#username").val(),
                "password":$("#password").val()
            };
            //alert(username);
            $.ajax({type:"get",
                   url:"http://localhost:8080/ssm_test/login.do",
                   data:data1,
                   caches:false,
                   dataType:"json",
                   error:function () {
                       $("#ajaxdiv").empty();
                       $("#ajaxdiv").append("<a>服务器连接错误</a>")
                   },
                   success:function (data) {
						//遍历map中的数据
                        $.each(data,function (name,value) {
							//清空div中的数据	
                            $("#ajaxdiv").empty();
							//判断返回的值是否为空
                            if (value!=null){
								//如果页面不跳转的话会在div下面直接显示欢迎
                                $("#ajaxdiv").append("<a>欢迎你"+value.username+"</a>");
								//用户信息存入浏览器cookie
                                $.cookie('user',value.username );
								//跳转到下一个界面
                                window.location.href="pages/success.html";
                            } else{
                                $("#ajaxdiv").append("<a>登陆失败</a>")
                            }
                        })

                   }
            });
        });
    })
</script>
</html>

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

<!DOCTYPE html>
<html lang="en">
<body>
<div id="users">
    success
</div>

</body>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="../static/jquery-2.1.1.min.js"></script>
    <script src="../static/jquery.cookie.js"></script>


</head>
<script type="text/javascript">
    $(function () {
        //获取user   cookie
        var  username=$.cookie("user");

        $("#users").append("<a>欢迎你:"+username+"</a>")
    })
</script>
</html>

补充：

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对象时

参考正文！！

Exception.

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
1
评论
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;imp...
复制链接

扫一扫