SpringBoot結(jié)合Ajax實現(xiàn)登錄頁面實例
更新時間：2022年02月10日 11:21:38 作者：路上的追夢人
大家好，本篇文章主要講的是SpringBoot結(jié)合Ajax實現(xiàn)登錄頁面實例，感興趣的同學(xué)趕快來看一看，對你有幫助的話記得收藏一下
一、 Ajax
1.1 Ajax介紹
AJAX 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
AJAX = 異步 JavaScript 和 XML
AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。
AJAX即Asynchronous JavaScript and XML（異步JavaScript和XML），是實現(xiàn)客戶端和服務(wù)器異步通信的方法；同步：請求和頁面的跳轉(zhuǎn)同時發(fā)生；異步：請求和頁面的跳轉(zhuǎn)不同時發(fā)生；異步的請求可以實現(xiàn)頁面的局部刷新；
1.2 異步的作用
節(jié)省流量；無需刷新整個頁面,服務(wù)器壓力也降低；用戶體驗好；
二、SpringBoot應(yīng)用Ajax
2.1 開發(fā)配置
IDEA項目目錄
pom.xml配置
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.4</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.2.8</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>application.yml
# 應(yīng)用名稱
spring:
application:
name: springboot-ajax
# thymeleaf模板
thymeleaf:
cache: true
check-template: true
check-template-location: true
enabled: true
encoding: UTF-8
mode: HTML5
prefix: classpath:/templates/
suffix: .html
# 數(shù)據(jù)源
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/ajax?serverTimezone=UTC
username: root
password: 1234
type: com.alibaba.druid.pool.DruidDataSource
# 應(yīng)用服務(wù) WEB 訪問端口
server:
port: 8080
mybatis:
configuration:
map-underscore-to-camel-case: true
2.2 創(chuàng)建user表
SQL實現(xiàn)
drop table if exists user; create table user( id int(8) NOT NULL AUTO_INCREMENT, loginName varchar(30) NULL DEFAULT NULL, loginPwd varchar(20) NULL DEFAULT NULL, realName varchar(30) NULL DEFAULT NULL, PRIMARY KEY(id) USING BTREE )ENGINE=INNODB AUTO_INCREMENT=3 ROW_FORMAT=Dynamic; insert into user values(1,'XiaoChen,'123456','小陳'); insert into user values(2,'XiaoWang','123456','小王'); insert into user values(3,'XiaoHua','123456','小花');
2.3 MVC三層架構(gòu)
1）Entity實體類
user對象
@Data
@AllArgsConstructor
@NoArgsConstructor
@ToString
public class User {
private int id;
private String loginName;
private String loginPwd;
private String realName;
}mapper接口
@Mapper
@Repository
public interface UserMapper {
@Select("select * from user")
public List<User> queryUsers();
}2) Service業(yè)務(wù)層
service層
public interface UserService {
public List<User> queryAllUsers();
}serviceImpl層
@Service
public class UserServiceImpl implements UserService {
@Resource
private UserMapper userMapper;
@Override
public List<User> queryAllUsers() {
return userMapper.queryUsers();
}
}3）Controller層
@RestController
@CrossOrigin //解決跨域問題
public class UserController {
@Resource
private UserServiceImpl userServiceImpl;
@RequestMapping("/xiaoChen")
public String index(String name,String pwd){
String msg="";
List<User> users=userServiceImpl.queryAllUsers();
User myUser=null;
for(User user:users){
if(user.getLoginName().equals(name)){
myUser=user;
msg="OK";
break;
}else{
msg="賬號錯誤";
}
}
if(pwd!=null){
if(myUser!=null&&myUser.getLoginPwd().equals(pwd)){
msg="OK";
}else{
msg="密碼錯誤";
}
}
return msg;
}
}2.4 前端測試頁面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax登錄頁面</title>
<script src="/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<p>
賬號：<input type="text" id="name" onblur="test1()"/>
<span id="username"></span>
</p>
<p>
密碼：<input type="text" id="pwd" onblur="test2()"/>
<span id="userpwd"></span>
</p>
<script type="text/javascript">
function test1(){
$.post({
url:"http://localhost:8080/xiaoChen",
data:{'name':$("#name").val()},
success:function(data){
if(data.toString()=='OK'){
$("#username").css("color","green");
}else{
$("#username").css("color","red");
}
$("#username").html(data);
}
});
}
function test2(){
$.post({
url: "http://localhost:8080/xiaoChen",
data: {'pwd': $("#pwd").val()},
success: function (data) {
if (data.toString()=='OK') {
$("#userpwd").css("color", "green");
} else {
$("#userpwd").css("color", "red");
}
$("#userpwd").html(data);
}
});
}
</script>
</body>
</html>2.5 測試結(jié)果
總結(jié)
到此這篇關(guān)于SpringBoot結(jié)合Ajax實現(xiàn)登錄頁面實例的文章就介紹到這了,更多相關(guān)SpringBoot登錄頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- jquery+ajaxform+springboot控件實現(xiàn)數(shù)據(jù)更新功能
- SpringBoot解決ajax跨域問題的方法
- Springboot解決ajax+自定義headers的跨域請求問題
- SpringBoot基于Shiro處理ajax請求代碼實例
- AJAX?SpringBoot?前后端數(shù)據(jù)交互的項目實現(xiàn)
- SpringBoot+Hutool+thymeleaf完成導(dǎo)出Excel的實現(xiàn)方法
- SpringBoot + thymeleaf 實現(xiàn)讀取視頻列表并播放視頻功能
- springboot如何使用thymeleaf完成頁面緩存
- SpringBoot+Thymeleaf+ECharts實現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
- 在SpringBoot中配置Thymeleaf的模板路徑方式
- SpringBoot+thymeleaf+ajax實現(xiàn)局部刷新詳情
相關(guān)文章
Java程序中實現(xiàn)調(diào)用Python腳本的方法詳解
這篇文章主要介紹了Java程序中實現(xiàn)調(diào)用Python腳本的方法,結(jié)合實例形式分析了eclipse環(huán)境中使用Java調(diào)用Python腳本的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2018-03-03
這篇文章主要為大家介紹了Nett分布式分隔符解碼器邏輯源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03
springboot實現(xiàn)修改請求狀態(tài)404改為200
這篇文章主要介紹了springboot實現(xiàn)修改請求狀態(tài)404改為200方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
mybatis插入數(shù)據(jù)后如何返回新增數(shù)據(jù)的id值
當(dāng)往mysql數(shù)據(jù)庫插入一條數(shù)據(jù)時,有時候需要知道剛插入的信息,下面這篇文章主要給大家介紹了關(guān)于mybatis插入數(shù)據(jù)后如何返回新增數(shù)據(jù)id值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
項目中，由于使用端有兩個，對于兩個端的數(shù)據(jù)權(quán)限并不一樣。Web端可以查看所有數(shù)據(jù)，小程序端只能查看脫敏后的數(shù)據(jù)，這篇文章主要介紹了SpringBoot項目中新增脫敏功能,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細(xì)介紹了java使用正則抓取網(wǎng)頁郵箱的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了Java中ArrayList類的用法與源碼完全解析,ArrayList類通過List接口實現(xiàn),是Java中引申出的一種數(shù)據(jù)結(jié)構(gòu),需要的朋友可以參考下2016-05-05
這篇文章主要介紹了idea 找不到符號或找不到包的幾種解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家介紹了關(guān)于ES多條件查詢的相關(guān)資料,Elasticsearch多條件查詢是指在查詢數(shù)據(jù)時,可以同時使用多個條件來篩選數(shù)據(jù),文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
詳解將Eclipse代碼導(dǎo)入到AndroidStudio的兩種方式
本篇文章主要介紹了詳解將Eclipse代碼導(dǎo)入到AndroidStudio的兩種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12