原生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 ...
随机推荐
- vue.js数据绑定语法
原始高清大图下载 1.数据绑定 html代码: <div id="first" class="first">msg:{{msg}}</div& ...
- This file's format is not supported or you don't specify a correct format. 解决办法
string path = @"c:\请假统计表.xlsx"; Workbook workBook = new Workbook(); workBook.Open(path); A ...
- Java热启动
1.在项目中的pom.xml中添加 <dependency> <groupId>org.springframework.boot</groupId> <art ...
- CSS中垂直水平居中
方法一:使用flex布局,父级元素设置justify-content和align-items <div class="cont"> <div class=&quo ...
- JAVA基础之基本类型包装类、System类、Math类、Arrays类及大数据运算
个人理解: 为了方便运算及调用一些方法,我们需要将基本类型的数值转换为对象:不过转换的时候需要特别注意好它们的类型到底是什么,需要调用方法的类名是哪个!特别注意是Byte常量池的相关问题(==):gc ...
- 集合、迭代器、增强for循环、泛型
1集合 集合是java中提供的一种容器,可以用来存储多个数据. 数组的长度是固定的.集合的长度是可变的.集合中存储的元素必须是引用类型数据. 1.1ArrayList集合存储元素(复习) 例: pub ...
- 打印机 Microsoft Print to PDF 所需的驱动程序 Microsoft Print To PDF 未知。登录之前，请与管理员联系，安装驱动程序。
这个问题发生后,我觉得很疑惑,因为服务器上确定没有安装打印机.那么打印机是从哪里来的呢? 通过百度搜索,发现网上的一个帖子解答了我的疑惑.原帖地址:http://blog.chinaunix.net/ ...
- BZOJ 2539: [Ctsc2000]丘比特的烦恼
Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 695 Solved: 260[Submit][Status][Discuss] Description ...
- python3.6 配置COCO API出错解决方案
使用Anaconda Prompt进行安装 问题出现的背景:在尝试使用mask-rcnn时,遇到了这个问题,最终解决掉了
- UVA208 Firetruck 消防车（并查集，dfs）
要输出所有路径,又要字典序,dfs最适合了,用并查集判断1和目的地是否连通即可 #include<bits/stdc++.h> using namespace std; ; int p[m ...