原生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 ...
随机推荐
- [PHP] – 性能优化 – Fcgi进程及PHP解析优化
https://www.abcdocker.com/abcdocker/808------[PHP] – 性能优化 – Fcgi进程及PHP解析优化
- var type = $('#<%=DropDownListRateType.ClientID %>').val();DropDownListRateType.ClientID是什么意思
<%=DropDownListRateType.ClientID %>这个是C#绑定服务器控件在客户端ID, 比如你的DropDownListRateType你定义一个id,如果你用了模板 ...
- 常见的JedisConnectionException 异常
最近在使用redis出现以下的异常: 1.redis.clients.jedis.exceptions.JedisConnectionException: java.net.ConnectExcept ...
- IOS制作纯色背景
// 生成纯色背景图- (UIImage *)createPureColorImageWithColor:(UIColor *)color alpha:(CGFloat)alpha size:(CGS ...
- Webpack 10分钟入门
可以说现在但凡开发Single page application,webpack是一个不可或缺的工具. WebPack可以看做是一个模块加工器,如上图所示.它做的事情是,接受一些输入,经过加工产生一些 ...
- UVA 11925 Generating Permutations 生成排列 （序列）
题意:要用一个有序的序列生成给定序列,操作有两种,一是交换前两个元素,二是把第一个元素移动到最后去. 思路有两种: 1.映射,把给定序列映射成有序的序列,然后按照同样的替换规则把有序的序列映射掉,然后 ...
- js类型判别大合集
1.typeof number,string,boolean,undefined,symbol,object,function 对象中除了函数为function,其他对象都判别为object, 缺陷: ...
- PAT (Basic Level) Practise （中文）-1020. 月饼 (25)
http://www.patest.cn/contests/pat-b-practise/1020 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量. ...
- sql server 定时备份 脚本
) DECLARE @date DATETIME SELECT @date = GETDATE() SELECT @filename = 'G:\backup\NewPlulishSQL-' + CA ...
- iOSAES加密的实现
+(NSData *)AES256ParmEncryptWithKey:(NSString *)key Encrypttext:(NSData *)text //加密 { char keyPtr[k ...