原生Ajax+springBoot实现用户登录
思路：用户输入登录信息——信息传到后台——数据库查询——比较查询结果——返回登录信息（成功/失败）
html页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="http://localhost:8080/ajax.js"></script>
</head>
<body>
<form>
<span>用户ID：</span><input style="margin:2px;" id="id" name="id"><br>
<span>密码：</span><input type="password" style="margin:2px;" id="password" name="password"><br>
<button style="margin:2px;" type="button" onclick="sumbit_name_sex()">登录</button>
<button style="margin:2px;" type="reset">取消</button><br>
</form>
</body>
</html>
外部ajax.js代码：
function sumbit_name_sex() {
var id=document.getElementById("id").value;
var password=document.getElementById("password").value;
var user={
id:id,
password:password,
}
//步骤一:创建异步对象s
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open("post", "http://localhost:8080/login",true);
ajax.setRequestHeader("Content-type","application/json; charset=utf-8");
//步骤三:发送请求
ajax.send(JSON.stringify(user));
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
if(ajax.responseText.length>=3){
alert("登录成功");
}else{
alert("登录失败");
}
//window.location.href="";
}else{
}
}
}
后台controller层的代码：
package com.jhc.taskmanage.controller; import com.alibaba.fastjson.JSONObject;
import com.jhc.taskmanage.model.User;
import com.jhc.taskmanage.service.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.RestController; import javax.servlet.http.HttpServletRequest;
import java.io.InputStreamReader;
import java.util.List; @Controller
@RestController
public class UserController { @Autowired
private UserService userService; @RequestMapping("/login")
public List<User> login(HttpServletRequest request){
InputStreamReader inputStreamReader= null;
String json="";
try{
inputStreamReader=new InputStreamReader(request.getInputStream(),"utf-8");
char[] buff=new char[1024];
int length=0;
while((length=inputStreamReader.read(buff))!=-1){
String json_temp=new String(buff,0,length);
json+=json_temp;
}
}catch (Exception ex){ }
JSONObject jsonObject=JSONObject.parseObject(json);
String id=(String)jsonObject.get("id");
String password=(String)jsonObject.get("password");
return userService.login(id,password);
} }
service层:
package com.jhc.taskmanage.service;
import com.jhc.taskmanage.model.User;
import java.util.List;
public interface UserService {
List<User> login(String id,String password);
}
package com.jhc.taskmanage.service.impl; import com.jhc.taskmanage.dao.UserDao;
import com.jhc.taskmanage.model.User;
import com.jhc.taskmanage.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service; import java.util.List; @Service
public class UserServiceImpl implements UserService { @Autowired
private UserDao userDao; @Override
public List<User> login(String id,String password){
return userDao.login(id,password);
}
}
dao层：
package com.jhc.taskmanage.dao; import com.jhc.taskmanage.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository; import java.util.List; @Repository
public interface UserDao { List<User> login(String id,String password);
}
package com.jhc.taskmanage.dao.impl; import com.jhc.taskmanage.dao.UserDao;
import com.jhc.taskmanage.model.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Repository; import java.util.ArrayList;
import java.util.List;
import java.util.Map; @Repository
public class UserDaoImpl implements UserDao { @Autowired
private JdbcTemplate jdbcTemplate; @Override
public List<User> login(String id,String password){
String sql="select id, name, sex, age from user where id='"+id+"' and password='"+password+"';";
List<Map<String,Object>> list=jdbcTemplate.queryForList(sql);
List<User> userArrayList=new ArrayList<>();
for(Map<String,Object> map:list){
User user=new User();
user.setId(map.get("id").toString());
user.setName(map.get("name").toString());
user.setSex(map.get("sex").toString());
user.setAge(Integer.valueOf(map.get("age").toString()));
user.setPassword("***********************");
userArrayList.add(user);
}
return userArrayList;
} }
model层：
package com.jhc.taskmanage.model; import org.springframework.stereotype.Component; @Component
public class User {
private String id;
private String name;
private String sex;
private int age;
private String password; public User(){ } public String getId() {
return id;
} public void setId(String id) {
this.id = id;
} public String getName() {
return name;
} public void setName(String name) {
this.name = name;
} public String getSex() {
return sex;
} public void setSex(String sex) {
this.sex = sex;
} public int getAge() {
return age;
} public void setAge(int age) {
this.age = age;
} public String getPassword() {
return password;
} public void setPassword(String password) {
this.password = password;
}
}
spring boot启动类：
package com.jhc.taskmanage; import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication
public class TaskmanageApplication { public static void main(String[] args) {
SpringApplication.run(TaskmanageApplication.class, args);
} }
配置文件application.properties:
server.port=8080
server.servlet.context-path=/
#spring.mvc.static-path-pattern=/
spring.resources.static-locations=classpath:/resources/,classpath:/static/,classpath:/js,classpath:/css,classpath:/image
spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://localhost:3306/myproject?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=mysql
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver #spring.datasource.max-idle=10
#spring.datasource.max-wait=10000
#spring.datasource.min-idle=5
#spring.datasource.initial-size=5 #server.session.timeout=10
server.tomcat.uri-encoding=UTF-8
运行截图：
欢迎纠错，不喜勿喷
原生Ajax+springBoot实现用户登录的更多相关文章
- 通过配置http拦截器，来进行ajax请求验证用户登录的页面跳转
在.NET中验证用户是否登录或者是否过期,若需要登录时则将请求转向至登录页面. 这个流程在进行页面请求时是没问题的,能正确进行页面跳转. 然而在使用xmlhttprequest时,或者jq的getJs ...
- springmvc3 拦截器,过滤ajax请求,判断用户登录,拦截规则设置
web.xml设置:(/拦截所有请求) <servlet> <servlet-name>dispatcher</servlet-name> <servlet- ...
- 4.EasyUI学习总结(四)——EasyUI组件使用 (通过用户登录来演示dialog、ajax的使用，serialize方法的使用，前后台怎样交互等)
一.EasyUI组件的简单介绍 详细可看api: http://www.jeasyuicn.com/api/docTtml/index.htm easyUI提供了很多组件让我们使用,如下图所示: 很多 ...
- ajax讲解：“创建用户”和“用户登录”练习
ajax可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. 接下来,将以例子的形式进行讲解 例一:创建用户 ...
- PHP+jQuery+Ajax实现用户登录与退…
用户登录与退出功能应用在很多地方,而在有些项目中,我们需要使用Ajax方式进行登录,登录成功后只刷新页面局部,从而提升了用户体验度.本文将使用PHP和jQuery来实现登录和退出功能. 查看演示DEM ...
- 【京东账户】——Mysql/PHP/Ajax爬坑之用户登录
一.引言 实现京东的账户项目,功能模块之一,用户登录.要用到的是Apach环境,Mysql.PHP以及Ajax. 二.依据功能创建库.表.记录 创建库:jd 创建表:登录表 添加三条记录 CREATE ...
- 用户登录ajax局部刷新验证码
用户登录的时候,登录页面附带验证码图片,用户需要输入正确的验证码才可以登录,验证码实现局部刷新操作. 效果如图: 代码如下: #生成验证码及图片的函数 newcode.py import rando ...
- [springboot 开发单体web shop] 5. 用户登录及首页展示
用户登录及前端展示 用户登录 在之前的文章中我们实现了用户注册和验证功能,接下来我们继续实现它的登录,以及登录成功之后要在页面上显示的信息. 接下来,我们来编写代码. 实现service 在com.l ...
- DBCP(MySql)+Servlet+BootStrap+Ajax实现用户登录与简单用户管理系统
目 录 简介 本次项目通过Maven编写 本文最后会附上代码 界面截图 登录界面 注册界面 登录成功进入主页 增加用户操作 删除用户操作 修改用户操作 主要代码 Dao层代码 DBCP代码 Se ...
随机推荐
- RL_RTX函数
1 延时:os_itv_set(usFrequency) //设置延时周期,配合os_itv_wait使用:os_itv_wait() 是绝对延迟是包含调用前的时间, os_dly_wait() 是相 ...
- Redis特性之持久化机制
持久化机制 Redis是一个支持持久化的内存数据库,也就是说redis需要经常将内存中的数据同步到硬盘来保证持久化. Redis支持两种持久化方式: 1.snapshotting(快照)也是默认方式 ...
- js中Object.defineProperty()和defineProperties()
在介绍js中Object.defineProperty()和defineProperties()之前,我们了解下js中对象两种属性的类型:数据属性和访问器属性. 数据属性 数据属性包含一个数据的位置, ...
- CF1157D N Problems During K Days
思路: 在1, 2, 3, ... , k的基础上贪心构造. 实现: #include <bits/stdc++.h> using namespace std; typedef long ...
- Properties-转换流-打印流-序列化和反序列化-Commons-IO工具类
一.Properties 类(java.util) 概述:Properties 是一个双列集合;Properties 属于map的特殊的孙子类;Properties 类没有泛型,propert ...
- volley框架下发送和读取cookie
首先volley本身不支持cookie,但是volley又非常好用(比如封装了网络请求的实现,内部支持并发, 不用我们再额外设计网络管理异步处理,网络请求不应在UI线程等等),那既想使用volley又 ...
- ios 设置导航栏背景色
//设置导航栏背景色 如果上面的不好用 就用下面的 [self.navigationController.navigationBar setBackgroundImage:[UIImage image ...
- Burpsuite Professional安装及使用教程
转自:https://www.jianshu.com/p/edbd68d7c341 1.先从吾爱破解论坛下载工具:https://down.52pojie.cn/Tools/Network_Analy ...
- SqlServer中生成一串连续数字
在SQLServer中一串连续数字,如1,2,3,4,5,....或者 1 2 3 4 5 没有现成方法,网上都用通用表表达式递归生成.今天想到一个还算简单的方法,记录下来: select row_n ...
- UVA 1611 Crane 起重机 （子问题）
题意:给一个1~n排列,1<=n<=10000,每次操作选取一个长度为偶数的连续区间.交换前一半和后一半,使它变成升序. 题解:每次只要把最小的移动到最左边,那么问题规模就缩小了.假设当前 ...