AJAX SpringBoot 前后端数据交互的项目实现

目录
  • 1.Ajax概述
  • 2.基于JQuery的AJAX语法

1. Ajax 概述

Ajax 的英文全称是 ”Asynchronous JavaScript and XML“，即 ”异步的 JavaScript 和 XML“。其核心是通过 JavaScript 的 XMLHttpRequest 对象，以一种异步的方式，向服务器发送数据请求，并且通过该对象接收请求返回的数据，从而实现客户端与服务器端的数据交互。

优点：Ajax 能够刷新指定的页面区域（局部刷新），而不是刷新整个页面，从而减少客户端和服务器端之间的数据交互传输，提高页面速度，使得用户体验更好。

初体验：基于 jQuery 方式动态绑定事件提交

给【获取验证码】按钮绑定点击事件，当用户点击该按钮时，向后台服务器发送 AJAX 请求获取一个随机验证码，登录页面的整体不重新加载，仅做局部的页面刷新。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步请求</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("后台验证码：" + 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>
            验证码：<input type="text" name="code"><br><br>
            <input type="button" value="登录">&emsp;<input type="button" id="flush" value="获取验证码">
        </form>
    </div>
</body>
</html>

SpringBoot 后台接收 AJAX 请求，首先要获取该请求携带的参数 id=1（该参数没有实际意义，仅做演示使用），然后根据请求业务，对该结果进行响应。success 回调函数对响应结果进行展示。

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

@Controller
public class TestController {

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

    //SpringBoot接收ajax请求的方式
    //方式一：使用HttpServletRequest request接收请求参数
    @GetMapping("/getCode")
    @ResponseBody
    public String getCode(HttpServletRequest request){
        String id = request.getParameter("id");
        System.out.println("AJAX传递的参数：" + id);
        //获取5位验证码
        return randomCodes();
    }

    //方式二：用@Param映射单个值
    @GetMapping("/getCode1")
    @ResponseBody
    public String getCode1(@Param("id") Integer id){
        System.out.println(id);
        //获取5位验证码
        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 接收请求参数的方式：

  • public String getCode(HttpServletRequest request)：使用 HttpServletRequest request 接收请求参数；
  • public String getCode1(@Param("id") Integer id)：用 @Param 映射单个值；

Ajax 异步请求一个典型的应用就是用户表单输入时，局部刷新验证码，而不会影响其他表单项已输入的信息。

传统的 WEB 数据交互与 AJAX 数据交互比较：

  • 客户端请求的方式不同：传统的 WEB 是用浏览器发送同步数据请求(form表单、a链接)，AJAX 是异步引擎对象发送异步请求；
  • 服务器响应的方式不同：传统的 WEB 每次响应的是一个完整的 HTML 页面即视图，AJAX 是局部刷新，返回响应需要的 JSON 数据；
  • 客户端处理方式不同：传统的 WEB 需要等待服务器完成响应并且重新加载整个页面之后，用户才能进行后续操作，AJAX 动态更新页面中的局部内容，不影响用户的其他操作；

2. 基于 JQuery 的 AJAX 语法

$.ajax({属性}) 常用的属性参数：

参数 描述
url 请求后端服务器的地址
type 请求方式，默认为 get 类型
data 请求参数
dataType 服务器返回的数据类型，比如：text/json/xml 等
success 请求成功的回调函数
error 请求失败的回调函数
complete 请求完成的回调函数(无论成功还是失败，都会被调用)

用法示例（服务器与客户端之间的数据交互类型是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)，一种轻量级数据交互格式，完成 js 与 Java/Python/PHP 等后端开 发语言对象数据之间的转换。客户端与服务器之间传递对象数据时，需要使用 JSON 格式。

案例：使用 AJAX 校验用户输入的信息，编写一个 2022 年硕士研究生招生考试成绩查询系统；

1、创建空白的 SpringBoot 项目，并在 pom.xml 导入相关依赖；

<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 数据库中创建一张考研成绩数据表(stu_score)，并录入若干条测试数据；

3、在全局配置文件 resources/application.yml 中配置数据源信息、视图解析器以及端口号等相关配置等；

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、创建数据表对应的实体类 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 下创建接口 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操作都已经编写好了
}

说明：由于系统规模较小，所以这里省略了 Service 服务层。

6、创建 SearchController 控制器，主要负责接收客户端浏览器的 AJAX 请求与响应。

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){
            //登录验证成功，通过id查询该考生的成绩（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、视图层（系统登录页面、成绩查询页面）

7.1 系统登录页面（客户端与服务器之间的数据交互格式是JSON，请求方式是AJAX，而不是通过form表单完成）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var btn = $("#btn");
            // 点击事件
            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"){
                            //登录成功，则跳转到成绩查询页面
                            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年硕士研究生招生考试成绩查询系统</h3>
        <img src="/static/img/logo.jpeg" style="width: 500px;height: 300px;"/>
        <!--这里不通过form表单提交客户端请求-->
        <form>
            准考证号：<input type="text" name="id" id="sid"><br>
            考生姓名：<input type="text" name="username" id="uname"><br>
            身份证号：<input type="text" name="password" id="pwd"><br/>
            <br/>
            <input type="button" value="查询" id="btn">
        </form>
    </div>
</body>
</html>

注：如果输入的信息校验失败，则通过红色字体给出提示，若信息校验成功，则会跳转到初试成绩的详细界面。

7.2 成绩详细页面（通过 thymeleaf 模板渲染数据）

<!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>研究生初试成绩查询</title>
</head>
<body>
    <div style="text-align: center;">
        <div style="border: 1px solid;">
            <h3>2022年研究生考试初始成绩查询</h3>
            <br>
            准考证号：<span th:text="${student.sid}"></span><br>
            姓名：<span th:text="${student.sname}"></span><br>
            身份证号：<span th:text="${student.card}"></span><br>
            <hr/>
            思想政治理论：<span th:text="${student.politics}"></span><br>
            英语(一)：<span th:text="${student.english}"></span><br>
            数学(一)：<span th:text="${student.math}"></span><br>
            计算机科学专业基础(408)：<span th:text="${student.computer}"></span><br>
            总分：<span th:text="${totalScore}"></span><br>
        </div>
        <p>说明：若查询的成绩为负值,表示有缺考、违纪等情况。若仍对查询结果有疑问,请咨询相应的招生单位。
        </p>
    </div>
</body>
</html>

总结：本项目用于演示 AJAX 与 SpringBoot 项目前后端数据交互，以案例+项目驱动的方式介绍了在 SpringBoot 项目开发中异步请求前后端数据的传递方式。

到此这篇关于AJAX SpringBoot 前后端数据交互的项目实现的文章就介绍到这了,更多相关AJAX SpringBoot 数据交互内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • SpringBoot学习之Json数据交互的方法

    JSON知识讲解 JSON的定义 JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式.它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据.简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言. 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率. 解释来自于百度百科,说简单点.JSON就是一串字符串 只不过元素会使用特定的符号标注. JSON

  • springboot前后台数据交互的示例代码

    springboot前后台数据交互的示例代码

    本文介绍了springboot前后台数据交互的示例代码,分享给大家,具体如下: 1.在路径中传递数据,比如对某个数据的id:123 前台发送:格式大致如下 在路径中传数据 后台接收: 后台接收数据 后台接收结果 2.查询字符串传递数据前台发送:   前台使用Querystring发送数据 后台接收: 这里@RequestParm可以不写,在后台找不到前台对应的字段时,输出null,在@RequestParam中指定的话输出指定的值(前台没给出字段时): 后台接收queryString方式传递的数

  • AJAX SpringBoot 前后端数据交互的项目实现

    AJAX SpringBoot 前后端数据交互的项目实现

    目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和

  • vue.js前后端数据交互之提交数据操作详解

    本文实例讲述了vue.js前后端数据交互之提交数据操作.分享给大家供大家参考,具体如下: 前端小白刚开始做页面的时候,我们的前端页面中经常会用到表单,所以学会提交表单也是一个基本技能,其实用ajax就能实现,但他的原始语法有点...额 ...复杂,所以这里给大家提供一种用vue-resource向后端提交数据. (1)第一步,先在template中写一个表单: <el-form :model="ruleForm" :rules="rules" ref=&quo

  • vuejs前后端数据交互之从后端请求数据的实例

    本文将向大家介绍一种用vue-resource从后端请求数据的方法. 比如说从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据: (2)在方法中定义一个请求函数,比如我们这里函数名定义为showDetails: methods:{ showDetails:function(){ this.$http.get(baseURL+"api/条件").then(function(res){ this.msg = res.body; }); } } 这

  • 如何理解Vue前后端数据交互与显示

    如何理解Vue前后端数据交互与显示

    一.技术概述 将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面,再传值给后端.该技术是Web开发必备,是前后端交互的纽带.难点在于获取后端数据并且防止数据联动. 二.技术详述 1. 从接口获取后端数据 (1) 仔细查看后端所传数据的类型.主要是区分数组和单个数据.查看后端的请求方式,区分post或者get. (2) 首先,在data中return一个xxxData:[]数组或一个变量xxxData:<类型>来接收后端传来的数据. (3) 在方法中定义一个请求函数

  • python+html实现前后端数据交互界面显示的全过程

    python+html实现前后端数据交互界面显示的全过程

    目录 前言 1.python开发工具 2.项目创建 总结 前言 最近刚刚开始学习如何将python后台与html前端结合起来,现在写一篇blog记录一下,我采用的是前后端不分离形式. 话不多说,先来实现一个简单的计算功能吧,前端输入计算的数据,后端计算结果,返回结果至前端进行显示. 1.python开发工具 我选用的是pycharm专业版,因为社区版本无法创建django程序 2.项目创建 第一步:打开pycharm,创建一个django程序 蓝圈圈起来的为自定义的名字,点击右下角的create

  • 实现前后端数据交互方法汇总

    此文章适合前后端协同开发经验不足的新手阅读. HTML赋值 输出到 Element 的 value 或 data-name <input type="hidden" value="<?php echo $user_avatar;?>" /> <div data-value="<?php echo $user_avatar;?>"></div> 渲染结果 <input type=&q

  • json前后端数据交互相关代码

    一.介绍 官方JSON介绍 WIKI百科. JavaScript object notation(记号法). JSON: JSON数据具有2种形式,一种是无序的key-value对的集合(对象),另一种是有序的值的集合(数组). {string : value, ...} object { "birthday": "1996-1-1", "name": "王小二", "comment": "这是注

  • SpringBoot前后端json数据交互的全过程记录

    SpringBoot前后端json数据交互的全过程记录

    目录 一.参考文献 二.勇敢尝试 三.最终选择交互方式 总结 一.参考文献 原生Ajax与JQuery Ajax SpringMVC接受JSON参数详解及常见错误总结 提交方式为 POST 时, JQuery Ajax 以 application/x-www-form-urlencoded 上传 JSON对象 , 后端用 @RequestParam 或者Servlet 获取参数. JQuery Ajax 以 application/json 上传 JSON字符串, 后端用 @RquestBody

  • IDEA教程创建SpringBoot前后端分离项目示例图解

    IDEA教程创建SpringBoot前后端分离项目示例图解

    目录 创建springboot项目 测试项目 按照MVC格式创建数据库项目 总结 springboot就是简化Spring应用中的初始化配置,快速创建项目而生的. 创建springboot项目 代开idea,点击File->New->Project,弹出如下对话框 输入组织.工程名,选择maven工程,注意:java版本号选择8 可以根据自己项目的需求选择依赖包,系统会自动将这些依赖包写入maven的pom文件,如下选择Spring Web.myBtias.mySQL驱动等.无需担心漏掉依赖包

  • springBoot前后端分离项目中shiro的302跳转问题

    springBoot前后端分离项目shiro的302跳转 项目是使用的springboot ,使用的shiro做的用户鉴权.在前端请求时当用户信息失效,session失效的时候,shiro会重定向到配置的login.jsp 页面,或者是自己配置的logUrl. 因是前后端分离项目,与静态资源文件分离,固重定向后,接着会404. 经过查找网上配置资料,发现302原因是 FormAuthenticationFilter中onAccessDenied 方法做了相应处理.那知道问题所在,就可以有解决方了

随机推荐