ajax表单int验证,基于SpringBoot+Ajax的表单校验功能（待改进）

基于SpringBoot+Ajax的表单校验功能

(自尝试)根据所学自己尝试完成的功能，不代表最终的版本目前觉的此方法效率会很低、待改进

Ajax、lombok、SpringBoot数据库

目录结构

依赖<?xml version="1.0" encoding="UTF-8"?>

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

4.0.0

org.springframework.boot

spring-boot-starter-parent

2.3.3.RELEASE

com.py

CGB-AJAX-02

0.0.1-SNAPSHOT

CGB-AJAX-02

Demo project for Spring Boot

1.8

org.springframework.boot

spring-boot-starter-jdbc

org.springframework.boot

spring-boot-starter-thymeleaf

org.springframework.boot

spring-boot-starter-web

org.mybatis.spring.boot

mybatis-spring-boot-starter

2.1.3

org.springframework.boot

spring-boot-devtools

runtime

true

mysql

mysql-connector-java

runtime

org.projectlombok

lombok

true

org.springframework.boot

spring-boot-starter-test

test

org.junit.vintage

junit-vintage-engine

org.springframework.boot

spring-boot-maven-plugin

配置文件spring.main.banner-mode=off

server.port=80

server.servlet.context-path=/

spring.datasource.url=jdbc:mysql://localhost:3306/mysql1?serverTimezone=GMT%2B8&characterEncoding=utf-8

spring.datasource.username=root

spring.datasource.password=root

mybatis.mapper-locations=classpath://mapper/*/*.xml

logging.level.com.py=debug

spring.thymeleaf.cache=false

spring.thymeleaf.prefix=classpath:/templates/pages/

spring.thymeleaf.suffix=.htmlcontroller

package com.py.ajax.controller;

import java.util.ArrayList;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

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

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

import com.py.ajax.pojo.Student;

import com.py.ajax.service.StudentService;

/**

* @author WL

* @version 创建时间：2020-9-3 9:03:05

* @Description 类描述

*/

@Controller

@RequestMapping("/")

public class AjaxController {

// 用于保存数据库中的数据

List names = new ArrayList();

@Autowired

private StudentService studentService;

@RequestMapping("indexPage")

public String inIndex() {

return "index";

}

// index

@ResponseBody

@RequestMapping("ajax")

public String doAjax() {

return "Ajax Page";

}

// 进入index2.html

@RequestMapping("index2")

public String inIndex2() {

return "index2";

}

// 检查输入的信息是否已经存在

@ResponseBody

@RequestMapping("ajax2")

public String doCheck(String name) {

//为了保证每次遍历时，集合中数据都和数据库保持一致，先清空

names.clear();

// 把从数据库中获取的信息遍历保存在names集合中

for (Student stu : studentService.findName()) {

names.add(stu.getName());

}

// 判断数据在数据库中是否存在，或者输入是否为空

if (names.contains(name) || name.length() <= 0) {

return name + "已存在或姓名不能为空";

} else {

return name + "不存在，可以保存";

}

}

// 保存输入的信息

@RequestMapping("doSave")

public String doSave(Student stu, String name) {

names.clear();

// 效率很低，目前的方法

// 把从数据库中获取的信息遍历保存在names集合中

for (Student stu2 : studentService.findName()) {

names.add(stu2.getName());

}

// 判断

if (names.contains(name) || name.length() <= 0) {

return "index2";

} else {

stu.setName(name);

studentService.saveStu(stu);

return "index2";

}

}

}dao

package com.py.ajax.dao;

import java.util.List;

import org.apache.ibatis.annotations.Insert;

import org.apache.ibatis.annotations.Mapper;

import org.apache.ibatis.annotations.Select;

import com.py.ajax.pojo.Student;

/**

* @author WL

* @version 创建时间：2020-9-3 10:07:55

* @Description 类描述

*/

@Mapper

public interface StudentMapper {

@Select("select * from stu ")

List findName();

@Insert("insert into stu value(null,#{name})")

int saveStu(Student stu);

}pojo

package com.py.ajax.pojo;

import lombok.Data;

/**

* @author WL

* @version 创建时间：2020-9-3 10:06:22

* @Description 类描述

*/

@Data

public class Student {

private Integer stu_id;

private String name;

}service

package com.py.ajax.service;

import java.util.List;

import com.py.ajax.pojo.Student;

/**

* @author WL

* @version 创建时间：2020-9-3 10:07:36

* @Description 类描述

*/

public interface StudentService {

List findName();

int saveStu(Student stu);

}serviceImpl

package com.py.ajax.serviceImpl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.py.ajax.dao.StudentMapper;

import com.py.ajax.pojo.Student;

import com.py.ajax.service.StudentService;

/**

* @author WL

* @version 创建时间：2020-9-3 10:18:05

* @Description 类描述

*/

@Service

public class StudentServiceImpl implements StudentService {

@Autowired

private StudentMapper studentMapper;

@Override

public List findName() {

return studentMapper.findName();

}

@Override

public int saveStu(Student stu) {

studentMapper.saveStu(stu);

return 0;

}

}index2.html

Insert title here

#ROWid {

color: red;

}

Ajax Page

Ajax 表单请求(数据库验证)

SAVE

function Clear() {

document.getElementById("ROWid").innerHTML = "";

}

// 检查是否存在

function Check() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xhr.status == 200) {

document.getElementById("ROWid").innerHTML = xhr.responseText;

}

;

};

var name = document.getElementById("inId").value;

xhr.open("GET", "ajax2?name=" + name, true);

xhr.send();

}

// 保存

function doSave() {

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4 && xht.status == 200) {

document.getElementById("resultId").innerHTML = xhr.responseText;

}

var name = document.getElementById("inId").value;

xhr.open("POST","doSave", true);

xhr.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

xhr.send("name="+name);

}

}

结果