SpringBoot整合Ajax实现前后端交互

文章目录

  • 项目结构
  • 测试截图
  • 源码
    • login.html
    • LoginController.java
    • 其他
      • jquery-3.5.1.js
      • PageController.java
      • pom.xml

项目结构

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

测试截图

SpringBoot整合Ajax实现前后端交互_第1张图片

源码

login.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

各种启动器配置


<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.0modelVersion>
	<parent>
		<groupId>org.springframework.bootgroupId>
		<artifactId>spring-boot-starter-parentartifactId>
		<version>2.3.0.RELEASEversion>
		<relativePath/> 
	parent>
	<groupId>com.examplegroupId>
	<artifactId>demoartifactId>
	<version>0.0.1-SNAPSHOTversion>
	<name>ajaxname>
	<description>Demo project for Spring Bootdescription>

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

	<dependencies>
		<dependency>
			<groupId>org.springframework.bootgroupId>
			<artifactId>spring-boot-starter-webartifactId>
		dependency>

		
		<dependency>
			<groupId>org.springframework.bootgroupId>
			<artifactId>spring-boot-starter-thymeleafartifactId>
		dependency>

		<dependency>
			<groupId>org.springframework.bootgroupId>
			<artifactId>spring-boot-starter-testartifactId>
			<scope>testscope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintagegroupId>
					<artifactId>junit-vintage-engineartifactId>
				exclusion>
			exclusions>
		dependency>
	dependencies>

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

project>

你可能感兴趣的:(#,SpringBoot)