JSON+AJAX完成用户登录

末蓝、 2024-04-19 08:04 148阅读 0赞

# 1、JSON #

### 1.1 json简介 ###

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。完全独立于编程语言的文本格式来存储和表示数据，易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

### 1.2 json格式 ###

1.以”\{”开始,以”\}”结束.  
2.对象中的属性名和属性值使用”:”分割,  
3.多个属性之间,使用”,”分割  
4.使用\[\]表示一个对象的数组  
5. 属性名必须加双引号  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NDY3Mw_size_16_color_FFFFFF_t_70]

### 1.3 json主要方法 ###

导入fastjson的jar包  
**（1）其他对象类型转为json字符串类型:**

JSON.toJSONString(Object obj);

**（2）json字符串类型转为其他对象类型:**

JSON.parseObject(String,xx.Class);

# 2、AJAX加Json完成用户登录 #

提前导入jquery依赖和fastjson依赖

### 2.1 新建jsp页面 ###

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="login.js"></script>
    
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    		
    	
    	<form action="" method="post">
    		<span id="msg"></span><br/>
    		用户姓名:<input type="text" name="username" id="username"><br/>
    		用户密码:<input type="text" name="password" id="password"><br/>
    		<input type="button" value="登录" id="submit">
    	</form>
    	
    </body>
    </html>

### 2.2 新建js文件 ###

$(function(){
    	$("#submit").click(function(){
    	
    		var username = $("#username").val();
    		var password = $("#password").val();
    		//获取json格式的文本内容
    		$.post("login?mark=login",{"username":username,"password":password},
    			function(data){
    				if(data.log){
    					/*输入要跳转的页面*/
    					/*window.location.href="xx.jsp";*/
    					alert("success");
    				}else{
    					$("#msg").css("color","red").html(data.msg);
    				}
    		},"json"
    		
    		);
    		
    	});
    });

### 2.3 新建controller类 ###

查询是否存在此用户  
把map对象转换成json字符串类型，写入到内存，并返回给js文件

private void login(HttpServletRequest request, HttpServletResponse response) throws Exception {
    		// 
    		response.setContentType("text/html;charset=utf-8");
    		PrintWriter writer = response.getWriter();
    		String msg = "";
    		String username = request.getParameter("username");
    		String password = request.getParameter("password");
    		Map<String, Object> map = new HashMap();
    		
    		//查询是否存在此用户
    		User user = new LoginServer().login(username, password);
    
    		if(user!=null) {
    			map.put("log", true);
    			map.put("msg", "成功");
    		}else {
    			map.put("log", false);
    			map.put("msg", "用户名或者密码错误");
    		}
    		
    		//把map对象转换成json字符串类型，写入到内存，并返回给js文件
    		writer.write(JSON.toJSONString(map));
    		
    	}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NDY3Mw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/94db0a6d89e04dec8e5fe414360b4f1b.png