SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁面實(shí)例

更新時(shí)間：2022年02月10日 11:21:38 作者：路上的追夢人

大家好，本篇文章主要講的是SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁面實(shí)例，感興趣的同學(xué)趕快來看一看，對你有幫助的話記得收藏一下

一、 Ajax

1.1 Ajax介紹

AJAX 是一種在無需重新加載整個(gè)網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。

AJAX = 異步 JavaScript 和 XML

AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對網(wǎng)頁的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁面。

AJAX即Asynchronous JavaScript and XML（異步JavaScript和XML），是實(shí)現(xiàn)客戶端和服務(wù)器異步通信的方法；同步：請求和頁面的跳轉(zhuǎn)同時(shí)發(fā)生；異步：請求和頁面的跳轉(zhuǎn)不同時(shí)發(fā)生；異步的請求可以實(shí)現(xiàn)頁面的局部刷新；

1.2 異步的作用

節(jié)省流量；無需刷新整個(gè)頁面,服務(wù)器壓力也降低；用戶體驗(yàn)好；

二、SpringBoot應(yīng)用Ajax

2.1 開發(fā)配置

IDEA項(xiàng)目目錄

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實(shí)現(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實(shí)體類

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="賬號錯(cuò)誤";
            }
        }
        if(pwd!=null){
            if(myUser!=null&&myUser.getLoginPwd().equals(pwd)){
                msg="OK";
            }else{
                msg="密碼錯(cuò)誤";
            }
        }
        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實(shí)現(xiàn)登錄頁面實(shí)例的文章就介紹到這了,更多相關(guān)SpringBoot登錄頁面內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁面實(shí)例

目錄

一、 Ajax

1.1 Ajax介紹

1.2 異步的作用

二、SpringBoot應(yīng)用Ajax

2.1 開發(fā)配置

2.2 創(chuàng)建user表

2.3 MVC三層架構(gòu)

2.4 前端測試頁面

2.5 測試結(jié)果

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

SpringBoot結(jié)合Ajax實(shí)現(xiàn)登錄頁面實(shí)例

目錄

一、 Ajax

1.1 Ajax介紹

1.2 異步的作用

二、SpringBoot應(yīng)用Ajax

2.1 開發(fā)配置

2.2 創(chuàng)建user表

2.3 MVC三層架構(gòu)

2.4 前端測試頁面

2.5 測試結(jié)果

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、 Ajax

二、SpringBoot應(yīng)用Ajax