原生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 ...
随机推荐
- html5响应式
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange’ in window ? ...
- rest_framework组件之认证，权限，访问频率
共用的models from django.db import models # Create your models here. class User(models.Model): username ...
- 兼容IE9以下的获取兄弟节点
function fileCheck(ele){ function getNextElement(node){ //兼容IE9以下的 获取兄弟节点 var NextElementNode = node ...
- ubuntu下irobot串口通讯
在window下以前就`有一个现成的串口代码.想移植到ubuntu下,发现都不一样了.要重新找个. 折腾了一上午之后,发现自己写这个串口通讯还是有一点难度. 于是,用了github上 Erick Co ...
- bug {was not declared in this scope}
使用自己定义的结构体作为返回值的时候,出现了 ...was not declared in this scope 检查了各种头文件,把缓存也都删掉了还是不行. 结果,发现,应该这样用vector< ...
- [PCL]对‘pcl::visualization::CloudViewer::CloudViewer(std::string const&)’未定义的引用
pcl::visualization::CloudViewer viewer("Cloud Viewer"); 这个时候报错. 试了很多方法,有人说,targe t_link 时候 ...
- Python3+Selenium3+webdriver学习笔记11（cookie处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记11(cookie处理)'''from selenium im ...
- package.json相关疑惑总结
语义版本控制(node-semver) X.Y.Z,主要版本X,次要版本Y,补丁Z X:代表一个破坏兼容性的大变化: Y:表示不会破坏任何内容的新功能: Z:表示不会破坏任何内容的错误修复: pack ...
- uoj#300.【CTSC2017】吉夫特
题面:http://uoj.ac/problem/300 一道大水题,然而我并不知道$lucas$定理的推论.. $\binom{n}{m}$为奇数的充要条件是$n&m=n$.那么我们对于每个 ...
- Django models多表操作
title: Django models多表操作 tags: Django --- 多表操作 单独创建第三张表的情况 推荐使用的是使用values/value_list,selet_related的方 ...