AJAX?SpringBoot?前后端數(shù)據(jù)交互的項(xiàng)目實(shí)現(xiàn)

更新時(shí)間：2022年03月01日 11:26:44 作者：Training.L

本文主要介紹了AJAX?SpringBoot?前后端數(shù)據(jù)交互的項(xiàng)目實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1. Ajax 概述

Ajax 的英文全稱是 ”Asynchronous JavaScript and XML“，即 ”異步的 JavaScript 和 XML“。其核心是通過(guò) JavaScript 的 XMLHttpRequest 對(duì)象，以一種異步的方式，向服務(wù)器發(fā)送數(shù)據(jù)請(qǐng)求，并且通過(guò)該對(duì)象接收請(qǐng)求返回的數(shù)據(jù)，從而實(shí)現(xiàn)客戶端與服務(wù)器端的數(shù)據(jù)交互。

優(yōu)點(diǎn)：Ajax 能夠刷新指定的頁(yè)面區(qū)域（局部刷新），而不是刷新整個(gè)頁(yè)面，從而減少客戶端和服務(wù)器端之間的數(shù)據(jù)交互傳輸，提高頁(yè)面速度，使得用戶體驗(yàn)更好。

初體驗(yàn)：基于 jQuery 方式動(dòng)態(tài)綁定事件提交

給【獲取驗(yàn)證碼】按鈕綁定點(diǎn)擊事件，當(dāng)用戶點(diǎn)擊該按鈕時(shí)，向后臺(tái)服務(wù)器發(fā)送 AJAX 請(qǐng)求獲取一個(gè)隨機(jī)驗(yàn)證碼，登錄頁(yè)面的整體不重新加載，僅做局部的頁(yè)面刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>異步請(qǐng)求</title>
    <script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btn = $("#flush");
            btn.click(function () {
                $.ajax({
                    url: '/getCode',
                    type:'get',
                    data:'id=1',  //字符串
                    dataType:'text',
                    success:function (data) {
                        console.log(data);
                        alert("后臺(tái)驗(yàn)證碼：" + data);
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div style="text-align: center;">
        <h2>用戶登錄</h2>
        <form>
            用戶名：<input type="text" name="username"><br>
            密&emsp;碼：<input type="password" name="password"><br>
            驗(yàn)證碼：<input type="text" name="code"><br><br>
            <input type="button" value="登錄">&emsp;<input type="button" id="flush" value="獲取驗(yàn)證碼">
        </form>
    </div>
</body>
</html>

SpringBoot 后臺(tái)接收 AJAX 請(qǐng)求，首先要獲取該請(qǐng)求攜帶的參數(shù) id=1（該參數(shù)沒(méi)有實(shí)際意義，僅做演示使用），然后根據(jù)請(qǐng)求業(yè)務(wù)，對(duì)該結(jié)果進(jìn)行響應(yīng)。success 回調(diào)函數(shù)對(duì)響應(yīng)結(jié)果進(jìn)行展示。

import javax.servlet.http.HttpServletRequest;
import java.util.Random;

@Controller
public class TestController {

    @GetMapping("/ajax")
    public String index(){
        return "form";
    }

    //SpringBoot接收ajax請(qǐng)求的方式
    //方式一：使用HttpServletRequest request接收請(qǐng)求參數(shù)
    @GetMapping("/getCode")
    @ResponseBody
    public String getCode(HttpServletRequest request){
        String id = request.getParameter("id");
        System.out.println("AJAX傳遞的參數(shù)：" + id);
        //獲取5位驗(yàn)證碼
        return randomCodes();
    }

    //方式二：用@Param映射單個(gè)值
    @GetMapping("/getCode1")
    @ResponseBody
    public String getCode1(@Param("id") Integer id){
        System.out.println(id);
        //獲取5位驗(yàn)證碼
        return randomCodes();
    }

    public String randomCodes(){
        String str="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        StringBuilder code=new StringBuilder(5);
        for(int i=0;i<5;i++)
        {
            char ch=str.charAt(new Random().nextInt(str.length()));
            code.append(ch);
        }
        return code.toString();
    }
}

上面介紹了兩種 SpringBoot 接收請(qǐng)求參數(shù)的方式：

public String getCode(HttpServletRequest request)：使用 HttpServletRequest request 接收請(qǐng)求參數(shù)；
public String getCode1(@Param("id") Integer id)：用 @Param 映射單個(gè)值；

Ajax 異步請(qǐng)求一個(gè)典型的應(yīng)用就是用戶表單輸入時(shí)，局部刷新驗(yàn)證碼，而不會(huì)影響其他表單項(xiàng)已輸入的信息。

傳統(tǒng)的 WEB 數(shù)據(jù)交互與 AJAX 數(shù)據(jù)交互比較：

客戶端請(qǐng)求的方式不同：傳統(tǒng)的 WEB 是用瀏覽器發(fā)送同步數(shù)據(jù)請(qǐng)求(form表單、a鏈接)，AJAX 是異步引擎對(duì)象發(fā)送異步請(qǐng)求；
服務(wù)器響應(yīng)的方式不同：傳統(tǒng)的 WEB 每次響應(yīng)的是一個(gè)完整的 HTML 頁(yè)面即視圖，AJAX 是局部刷新，返回響應(yīng)需要的 JSON 數(shù)據(jù)；
客戶端處理方式不同：傳統(tǒng)的 WEB 需要等待服務(wù)器完成響應(yīng)并且重新加載整個(gè)頁(yè)面之后，用戶才能進(jìn)行后續(xù)操作，AJAX 動(dòng)態(tài)更新頁(yè)面中的局部?jī)?nèi)容，不影響用戶的其他操作；

2. 基于 JQuery 的 AJAX 語(yǔ)法

$.ajax({屬性}) 常用的屬性參數(shù)：

參數(shù)	描述
url	請(qǐng)求后端服務(wù)器的地址
type	請(qǐng)求方式，默認(rèn)為 get 類型
data	請(qǐng)求參數(shù)
dataType	服務(wù)器返回的數(shù)據(jù)類型，比如：text/json/xml 等
success	請(qǐng)求成功的回調(diào)函數(shù)
error	請(qǐng)求失敗的回調(diào)函數(shù)
complete	請(qǐng)求完成的回調(diào)函數(shù)(無(wú)論成功還是失敗，都會(huì)被調(diào)用)

用法示例（服務(wù)器與客戶端之間的數(shù)據(jù)交互類型是JSON）：

$.ajax({
	url:'/search',
	type:'post',
	data:{
		'id':$("#sid").val(),
		'username':$("#uname").val(),
		'password':$("#pwd").val()
	},
	dataType:'json',
	success:function (data) {
		console.log(data);
		$("#sid").val(data.id);
		$("#uname").val(data.name);
		$("#score").val(data.score);
	}
})

JSON(JavaScript Object Notation)，一種輕量級(jí)數(shù)據(jù)交互格式，完成 js 與 Java/Python/PHP 等后端開(kāi) 發(fā)語(yǔ)言對(duì)象數(shù)據(jù)之間的轉(zhuǎn)換?？蛻舳伺c服務(wù)器之間傳遞對(duì)象數(shù)據(jù)時(shí)，需要使用 JSON 格式。

案例：使用 AJAX 校驗(yàn)用戶輸入的信息，編寫一個(gè) 2022 年碩士研究生招生考試成績(jī)查詢系統(tǒng)；

1、創(chuàng)建空白的 SpringBoot 項(xiàng)目，并在 pom.xml 導(dǎo)入相關(guān)依賴；

<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>com.baomidou</groupId>
    <artifactId>mybatis-plus-boot-starter</artifactId>
    <version>3.4.2</version>
</dependency>

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.46</version>
</dependency>

2、在 MySQL 數(shù)據(jù)庫(kù)中創(chuàng)建一張考研成績(jī)數(shù)據(jù)表(stu_score)，并錄入若干條測(cè)試數(shù)據(jù)；

3、在全局配置文件 resources/application.yml 中配置數(shù)據(jù)源信息、視圖解析器以及端口號(hào)等相關(guān)配置等；

spring:
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
  datasource:
    url: jdbc:mysql://localhost:3306/user?useUnicode=true&characterEncoding=UTF-8
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver
  mvc:
    static-path-pattern: /static/**
server:
  port: 8181
# 配置SQL日志
mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

4、創(chuàng)建數(shù)據(jù)表對(duì)應(yīng)的實(shí)體類 Student；

package com.trainingl.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
@TableName(value = "stu_score")
public class Student {
    @TableId(type = IdType.ASSIGN_ID)
    private Long sid;
    private String sname;
    private String card;
    private Integer politics;
    private Integer english;
    private Integer math;
    private Integer computer;
}

5、在路徑 com > trainingl > mapper 下創(chuàng)建接口 StudentMapper；

package com.trainingl.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.trainingl.entity.Student;
import org.springframework.stereotype.Repository;

@Repository
public interface StudentMapper extends BaseMapper<Student> {
    //所有的CRUD操作都已經(jīng)編寫好了
}

說(shuō)明：由于系統(tǒng)規(guī)模較小，所以這里省略了 Service 服務(wù)層。

6、創(chuàng)建 SearchController 控制器，主要負(fù)責(zé)接收客戶端瀏覽器的 AJAX 請(qǐng)求與響應(yīng)。

package com.trainingl.controller;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.trainingl.entity.Student;
import com.trainingl.mapper.StudentMapper;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import java.util.HashMap;
import java.util.Map;

@Controller
@RequestMapping("/suda")
public class SearchController {
    @Autowired
    private StudentMapper studentMapper;

    @GetMapping("/search")
    public String home(){
        return "login";
    }

    @PostMapping("/login")
    @ResponseBody
    public Map<String,String> login(HttpServletRequest request){
        String id = request.getParameter("id");
        String username = request.getParameter("username");
        String card = request.getParameter("password");
        //查詢判斷
        QueryWrapper<Student> wrapper = new QueryWrapper<>();
        wrapper
                .eq("sid",id)
                .eq("sname", username)
                .eq("card", card);
        Integer count = studentMapper.selectCount(wrapper);
        //返回值
        HashMap<String, String> map = new HashMap<>();
        if (count == 1){
            //登錄驗(yàn)證成功，通過(guò)id查詢?cè)摽忌某煽?jī)（id具有唯一性）
            map.put("result", id);
            map.put("code","100");
        }else {
            map.put("result","登錄失??！輸入信息有誤！");
            map.put("code","200");
        }
        return map;
    }

    @GetMapping("/searchById/{id}")
    public ModelAndView searchById(@PathVariable Long id){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("person");
        Student student = studentMapper.selectById(id);
        System.out.println(student);
        Integer total = student.getPolitics() + student.getEnglish() + student.getMath() + student.getComputer();
        modelAndView.addObject("student", student);
        modelAndView.addObject("totalScore", total);
        return modelAndView;
    }
}

7、視圖層（系統(tǒng)登錄頁(yè)面、成績(jī)查詢頁(yè)面）

7.1 系統(tǒng)登錄頁(yè)面（客戶端與服務(wù)器之間的數(shù)據(jù)交互格式是JSON，請(qǐng)求方式是AJAX，而不是通過(guò)form表單完成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系統(tǒng)登錄</title>
    <script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btn = $("#btn");
            // 點(diǎn)擊事件
            btn.click(function () {
                $.ajax({
                    url:'/suda/login',
                    type:'post',
                    data:{
                        'id':$("#sid").val(),
                        'username':$("#uname").val(),
                        'password':$("#pwd").val()
                    },
                    dataType:'json',
                    success:function (data) {
                        if(data.code == "100"){
                            //登錄成功，則跳轉(zhuǎn)到成績(jī)查詢頁(yè)面
                            window.location.href = "/suda/searchById/" + data.result;
                        }else{
                            //登錄失敗，則給出提示信息
                            var msg = $("#btn");
                            msg.after("<br><br><span style='color:red;'>提示："+data.result+"</span>")
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <div style="text-align:center;">
        <img src="/static/img/brand.png" style="width: 280px;height: 100px;"/>
        <h3>2022年碩士研究生招生考試成績(jī)查詢系統(tǒng)</h3>
        <img src="/static/img/logo.jpeg" style="width: 500px;height: 300px;"/>
        <!--這里不通過(guò)form表單提交客戶端請(qǐng)求-->
        <form>
            準(zhǔn)考證號(hào)：<input type="text" name="id" id="sid"><br>
            考生姓名：<input type="text" name="username" id="uname"><br>
            身份證號(hào)：<input type="text" name="password" id="pwd"><br/>
            <br/>
            <input type="button" value="查詢" id="btn">
        </form>
    </div>
</body>
</html>

注：如果輸入的信息校驗(yàn)失敗，則通過(guò)紅色字體給出提示，若信息校驗(yàn)成功，則會(huì)跳轉(zhuǎn)到初試成績(jī)的詳細(xì)界面。

7.2 成績(jī)?cè)敿?xì)頁(yè)面（通過(guò) thymeleaf 模板渲染數(shù)據(jù)）

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<html xmlns:th="http://www.thymeleaf.org"></html>
<head>
    <meta charset="UTF-8">
    <title>研究生初試成績(jī)查詢</title>
</head>
<body>
    <div style="text-align: center;">
        <div style="border: 1px solid;">
            <h3>2022年研究生考試初始成績(jī)查詢</h3>
            <br>
            準(zhǔn)考證號(hào)：<span th:text="${student.sid}"></span><br>
            姓名：<span th:text="${student.sname}"></span><br>
            身份證號(hào)：<span th:text="${student.card}"></span><br>
            <hr/>
            思想政治理論：<span th:text="${student.politics}"></span><br>
            英語(yǔ)(一)：<span th:text="${student.english}"></span><br>
            數(shù)學(xué)(一)：<span th:text="${student.math}"></span><br>
            計(jì)算機(jī)科學(xué)專業(yè)基礎(chǔ)(408)：<span th:text="${student.computer}"></span><br>
            總分：<span th:text="${totalScore}"></span><br>
        </div>
        <p>說(shuō)明：若查詢的成績(jī)?yōu)樨?fù)值,表示有缺考、違紀(jì)等情況。若仍對(duì)查詢結(jié)果有疑問(wèn),請(qǐng)咨詢相應(yīng)的招生單位。
        </p>
    </div>
</body>
</html>

總結(jié)：本項(xiàng)目用于演示 AJAX 與 SpringBoot 項(xiàng)目前后端數(shù)據(jù)交互，以案例+項(xiàng)目驅(qū)動(dòng)的方式介紹了在 SpringBoot 項(xiàng)目開(kāi)發(fā)中異步請(qǐng)求前后端數(shù)據(jù)的傳遞方式。

到此這篇關(guān)于AJAX SpringBoot 前后端數(shù)據(jù)交互的項(xiàng)目實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)AJAX SpringBoot 數(shù)據(jù)交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: