SpringBoot整合Ajax实现前后端交互

最新推荐文章于 2023-04-03 20:56:06 发布

AmarisEx

最新推荐文章于 2023-04-03 20:56:06 发布

阅读量2.3k

点赞数 2

分类专栏： # SpringBoot 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43488958/article/details/106481522

版权

SpringBoot 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

项目结构
测试截图
源码

项目结构

├─java
│  └─com
│      └─example
│          └─demo
│              │  AjaxApplication.java
│              │
│              └─controller
│                      LoginController.java
│                      PageController.java
│
└─resources
    │  application.properties
    │
    ├─static
    │  └─js
    │          jquery-3.5.1.js
    │
    └─templates
            login.html

测试截图

在这里插入图片描述

源码

login.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="/js/jquery-3.5.1.js"></script>
    <title>登录</title>
</head>

用户名
<input type="text" id="name"/>
<br>
密码
<input type="password" id="password">
<br>
<input type="button" value="登录" id="submit">

</body>
<script type="text/javascript">
    $(function () {
        $("#submit").click(function () {
            $.ajax({
                url:"/index/login",
                type: "post",
                data: {"name":$("#name").val(),"password":$("#password").val()},
                dataType:"json",
                success:function (data) {
                    if(data.toString()=="true"){
                        alert("登录成功");
                    }else {
                        alert("用户名或密码错误")
                    }
                }
            });
        });
    });
</script>
</html>

LoginController.java

package com.example.demo.controller;

import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/index")
public class LoginController {

    @RequestMapping("/login")
    public boolean login(String name, String password){
        //假设数据库中存在一个账户为：admin,123456
        if(name.equals("admin")&&password.equals("123456")){
            return true;
        }
        return false;
    }
}

其他

jquery-3.5.1.js

js库，官网即可下载（另附下载链接如下）
jquery-3.5.1

PageController.java

用来做页面跳转

package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;

/**
 * 页面跳转Controller
 */
@Controller
public class PageController {

    /**
     * 页面跳转方法
     */
    @GetMapping("/{page}")
    public String showPage(@PathVariable String page){

        return page;
    }

}

pom.xml

各种启动器配置

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.0.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>ajax</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>14</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<!-- Thymeleaf -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</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>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

AmarisEx

关注

2
点赞
踩
24

收藏

觉得还不错? 一键收藏
1
评论
SpringBoot整合Ajax实现前后端交互

文章目录项目结构测试截图源码login.htmlLoginController.java其他jquery-3.5.1.jsPageController.javapom.xml项目结构├─java│ └─com│ └─example│ └─demo│ │ AjaxApplication.java│ ││ └─controller│ Login
复制链接

扫一扫