手搭手Ajax经典基础案例省市联动

环境介绍

技术栈

springboot+mybatis-plus+mysql

软件

版本

mysql

8

IDEA

IntelliJ IDEA 2022.2.1

JDK

1.8

Spring Boot

2.7.13

mybatis-plus

3.5.3.2

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.7.15</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>ajaxDemo01</artifactId><version>0.0.1-SNAPSHOT</version><name>ajaxDemo01</name><description>ajaxDemo01</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>2.0.32</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.2</version></dependency><dependency><groupId>p6spy</groupId><artifactId>p6spy</artifactId><version>3.9.1</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.2.15</version></dependency><dependency><groupId>com.baomidou</groupId><artifactId>dynamic-datasource-spring-boot-starter</artifactId><version>3.5.0</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.24</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>
</project>

application.yml配置文件

spring:datasource:
#    username: root
#    password: 111111
#    url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8
#    driver-class-name: com.p6spy.engine.spy.P6SpyDriverdynamic:primary: sys #设置默认的数据源或者数据源组,默认值即为masterstrict: false #严格匹配数据源,默认false. true未匹配到指定数据源时抛异常,false使用默认数据源datasource:sys:username: rootpassword: 111111url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driverwms:url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/Wms?useUnicode=true&characterEncoding=UTF-8username: rootpassword: 111111driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driversys2:username: rootpassword: 111111url: jdbc:p6spy:mysql://127.0.0.1:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8driver-class-name: com.p6spy.engine.spy.P6SpyDriverserver:port: 8083mybatis-plus:configuration:#输出日志log-impl: org.apache.ibatis.logging.stdout.StdOutImpl#配置映射规则map-underscore-to-camel-case: true #表示支持下划线到驼蜂的映射#隐藏mybatis图标global-config:banner: falsedb-config:logic-delete-field: statuslogic-not-delete-value: 1logic-delete-value: 0
#
#mybatis:
#  mapper-locations=classpath: com/example/dao/*.xml

数据库表

MybatisX逆向工程

逆向工程:通过数据库表接口,逆向生成java工程结构

实体类、mapper接口、mapper映射文件、Service接口、service实现类

domain(pojo)实体类

@Data
public class TArea implements Serializable {/*** */private Integer id;/*** */private String code;/*** */private String name;/*** */private String parentcode;private static final long serialVersionUID = 1L;
}

mapper(dao)接口

@Mapper
public interface TAreaMapper extends BaseMapper<TArea> {List<TArea> getALLParentcodeIsNull();List<TArea> getByParentcode(@Param("parentcode") String parentcode);}

mapper.xml映射文件

<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.TAreaMapper"><resultMap id="BaseResultMap" type="com.example.domain.TArea"><id property="id" column="id" jdbcType="INTEGER"/><result property="code" column="code" jdbcType="VARCHAR"/><result property="name" column="name" jdbcType="VARCHAR"/><result property="parentcode" column="ParentCode" jdbcType="VARCHAR"/></resultMap><sql id="Base_Column_List">id,code,name,ParentCode</sql><select id="getALLParentcodeIsNull" resultType="com.example.domain.TArea">select * from t_area where ISNULL(ParentCode)</select><select id="getByParentcode" resultType="com.example.domain.TArea">select * from t_area where ParentCode =#{parentcode}</select>
</mapper>

service接口

public interface TAreaService extends IService<TArea> {List<TArea> getALLProvince();List<TArea> getByParentcode(String parentcode);
}

service实现类

@Service
@DS("sys2")
public class TAreaServiceImpl extends ServiceImpl<TAreaMapper, TArea>implements TAreaService{@Autowiredprivate TAreaMapper tAreaMapper;@Overridepublic List<TArea> getALLProvince() {return tAreaMapper.getALLParentcodeIsNull();}@Overridepublic List<TArea> getByParentcode(String parentcode) {return tAreaMapper.getByParentcode(parentcode);}
}

test测试类

@Test
void area(){//tAreaService.list();//tAreaService.getALLProvince();tAreaService.getByParentcode("001");
}

area.html前端页面

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script type="text/javascript" src="../js/jquery-3.4.1.js"></script><select id="province"><option value="">选择省份</option>
</select><select id="city"><option value="">选择城市</option>
</select><script type="text/javascript">$(document).ready(function () {$.ajax({type : "get",url :"/Area",dataType : "json",async :"false",//默认true ,异步success : function(data){for (var i=0; i<data.length;i++){let tr ="<option value='"+data[i].code+"'>"+data[i].name+"</option>";console.log(tr)$("#province").append(tr);}}})});$("#province").change(function () {let  b=this.value;console.log(b)$.ajax({type : "GET",url :"/"+b+"/Area2",dataType : "json",async :"false",//默认true ,异步success : function(data){//清空原来的数据$("#city").empty();for (var i=0; i<data.length;i++){let tr ="<option value='"+data[i].code+"'>"+data[i].name+"</option>";console.log(tr)$("#city").append(tr);}}})})
</script>
</body>
</html>

controller控制层

@RequestMapping("/Area")
@ResponseBody
public List<TArea> Areademo() {List<TArea> allProvince = tAreaService.getALLProvince();return allProvince;
}@RequestMapping("/{code}/Area2")
@ResponseBody
public List<TArea> Areademo2(@PathVariable("code") String code) {List<TArea> allProvince = tAreaService.getByParentcode(code);return allProvince;
}

      

---------------------------------------------------------------------------------------------------------------------------

以下为原理基础,可略

Ajax即Asynchronous Javascript And XML(异步JavaScript和XML)在 2005年被Jesse James Garrett提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面,这使得程序能够更快地回应用户的操作。

ajax基础

Xmlhttprequest对象是AJAX的核心对象,发送请求以及接收服务器数据的返回。

Xmlhttprequest对象,现代浏览器都是支持的,都内置了该对象。直接用即可。

XmlHttpRequest对象基本方法:

abort():停止发送当前请求

getAllResponseHeader():获取服务器的全部响应头

getResponseHeader("headerLabel”):根据响应头的名字,获取对应的响应头

open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立与服务器URL的连接,并设置请求的方法,以及是否使用异步请求。如果远程服务需要用户名、密 码,则 提供对应的信息。

send(content):发送请求。其中content是请求参数

setRequestHeader(“label”,”value”):在发送请求之前,先设置请求头

XMLHttpRequest对象的简单的属性:

onreadystatechange:该属性用于指定XMLHttpRequest对象状态改变时的事件处理函数。

readyState:该属性用于获取XMLHttpRequest对象处理状态

responseText:该属性用于获取服务器响应的XML文档对象

status:该属性是服务器返回的状态码,只有当服务器的响应已经完成时,才会有该状态码

statusText:该属性是服务器返回的状态文本信息,只有当服务器的响应已经完成时,才会有该状态文本信息。

XMLHttpRequest对象的readyState属性对应的状态值

0:请求未初始化

1:服务器连接已建立

2:请求已收到

3:正在处理请求

4:请求已完成且响应已就绪

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="mydiv"></div>
<input type="button" value="hello ajax" id="helloAjax">
<script type="text/javascript">window.onload = function (){document.getElementById("helloAjax").onclick =function (){// console.log("发送ajax请求")//1、创建ajax黑心对象XMLHttpRequestvar xhr =new XMLHttpRequest();//2、注册回调函数//该函数在XMLHttpRequestState状态值发生改变时被调用xhr.onreadystatechange = function () {//readyState是Ajax状态码/*** XMLHttpRequest对象的readyState属性对应的状态值* 0:请求未初始化* 1:服务器连接已建立* 2:请求已收到* 3:正在处理请求* 4:请求已完成且响应已就绪*/console.log(xhr.readyState)// if (this.readyState == 4){//     console.log("响应结束")// }//status是http协议状态码console.log("http响应状态码"+this.status)if (this.status==404){alert("访问资源不存在")}if (this.status ==200){//将响应信息放到div图层中,渲染//innerHTML是javascript的元素属性,和ajax的XMLHttpRequest对象无关,innerText也是javascript的元素属性//innerHTML可以设置元素内部的HTML代码。document.getElementById("mydiv").innerHTML =this.responseText;document.getElementById("mydiv").innerText =this.responseText;}}//3、开启通道//open(method,url,async,user,psw)//method:请求方式,get,post//url:请求路径//async:true或false,true表示异步请求,false表示同步请求//user用户名//psw密码xhr.open("GET","/test01",true)//4、xhr.send()}}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/115797.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测(SE注意力机制)

分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测&#xff08;SE注意力机制&#xff09; 目录 分类预测 | MATLAB实现SSA-CNN-BiLSTM-Attention数据分类预测&#xff08;SE注意力机制&#xff09;分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MAT…

认识哈希表和哈希表的实现

哈希函数的定义&#xff1a; out f(in) 1&#xff09;in -> ∞&#xff0c; out -> S 输入域是无穷的&#xff0c;输出域是有限的&#xff0c;也就是S域&#xff1b; 2&#xff09;相同的输入一定会得到相同的输出&#xff1b; 3&#xff09;不同的输入可能会有相同…

Swift 判断 A B 两个时间是不是同一天,A 是不是 B 的昨天

1. 今天要做这个效果&#xff08;在时间旁边显示今天&#xff0c;昨天&#xff09; 2. Preview 3. Code: // 添加 今天 昨天 func show_today_yesterday(d: Date Date()) -> String {let calendar Calendar.currentlet today: Date Date()if calendar.isDate(today, inS…

C++DAY50

源文件代码 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);if(!db.contains()){db QSqlDatabase::addDatabase("QSQLITE");db.setDatabaseName(&q…

QTday05(TCP的服务端客户端通信)

实现聊天室功能 服务端代码&#xff1a; pro文件需要导入 network 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTcpServer>//服务端 #include <QTcpSocket>//客户端 #include <QList> #include <QMes…

超声波清洗机频率如何选择?高频和低频有什么区别

超声波清洗原理就是在清洗液中产生“空化效应”&#xff0c;即清洗液产生拉伸和压缩现象&#xff0c;清洗液拉伸时会产生大量微小气泡&#xff0c;清洗液压缩时气泡会被压碎破裂。这些气泡产生和破裂的局部压强可达到上千个大气压的冲击力&#xff0c;这种极强大的压力足以使得…

Leetcode 1089. 复写零

复写零 题目链接1089. 复写零 给你一个长度固定的整数数组 arr &#xff0c;请你将该数组中出现的每个零都复写一遍&#xff0c;并将其余的元素向右平移。 注意&#xff1a;请不要在超过该数组长度的位置写入元素。请对输入的数组 就地 进行上述修改&#xff0c;不要从函数返回…

网络协议--UDP:用户数据报协议

11.1 引言 UDP是一个简单的面向数据报的运输层协议&#xff1a;进程的每个输出操作都正好产生一个UDP数据报&#xff0c;并组装成一份待发送的IP数据报。这与面向流字符的协议不同&#xff0c;如TCP&#xff0c;应用程序产生的全体数据与真正发送的单个IP数据报可能没有什么联…

一分钟带你了解什么是0day攻击什么是Nday攻击

1. 什么是零日漏洞 零日攻击是指利用零日漏洞对系统或软件应用发动的网络攻击。 零日漏洞也称零时差漏洞&#xff0c;通常是指还没有补丁的安全漏洞。由于零日漏洞的严重级别通常较高&#xff0c;所以零日攻击往往也具有很大的破坏性。目前&#xff0c;任何安全产品或解决方案…

吃瓜教程2|线性模型

线性回归 “广义的线性模型”&#xff08;generalized linear model&#xff09;&#xff0c;其中&#xff0c;g&#xff08;*&#xff09;称为联系函数&#xff08;link function&#xff09;。 线性几率回归&#xff08;逻辑回归&#xff09; 线性判别分析 想让同类样本点的…

ATPCS:ARM-Thumb程序调用的基本规则

为了使单独编译的c文件和汇编文件之间能够互相调用&#xff0c;需要制定一系列的规则&#xff0c;AAPCS就是ARM程序和Thumb程序中子程序调用的基本规则。 1、ATPCS概述 ATPCS规定了子程序调用过程中寄存器的使用规程、数据站的使用规则、参数的传递规则。为了适应一些特殊的需…

【C++】继承 ⑧ ( 继承 + 组合 模式的类对象 构造函数 和 析构函数 调用规则 )

文章目录 一、继承 组合 模式的类对象 构造函数和析构函数调用规则1、场景说明2、调用规则 二、完整代码示例分析1、代码分析2、代码示例 一、继承 组合 模式的类对象 构造函数和析构函数调用规则 1、场景说明 如果一个类 既 继承了 基类 ,又 在类中 维护了一个 其它类型 的…

腾讯地图基本使用(撒点位,点位点击,弹框等...功能) 搭配Vue3

腾讯地图的基础注册账号 展示地图等基础功能在专栏的上一篇内容 大家有兴趣可以去看一看 今天说的是腾讯地图的在稍微一点的基础操作 话不多说 直接上代码 var marker ref(null) var map var center ref(null) // 地图初始化 const initMap () > {//定义地图中心点坐标…

Mysql数据库 3.SQL语言 DML数据操纵语言 增删改

DML语句&#xff1a;用于完成对数据表中数据的插入、删除、修改操作 一.表数据插入 插入数据语法&#xff1a; 步骤例&#xff1a; 1.声明数据库&#xff1a;use 数据库名; 2.删除操作&#xff1a;drop table if exists 表名; 3.创建数据库中的表&#xff1a;create table 表…

Java,回形数

回形数基本思路&#xff1a; 用不同的四个分支分别表示向右向下向左向上&#xff0c;假如i表示数组的行数&#xff0c;j表示数组的列数&#xff0c;向右向左就是控制j的加减&#xff0c;向上向下就是控制i的加减。 class exercise {public static void main(String[] args){//回…

【AOA-VMD-LSTM分类故障诊断】基于阿基米德算法AOA优化变分模态分解VMD的长短期记忆网络LSTM分类算法(Matlab代码)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Node学习笔记之fs模块

fs 全称为 file system &#xff0c;称之为 文件系统 &#xff0c;是 Node.js 中的 内置模块 &#xff0c;可以对计算机中的磁盘进行操 作。 本章节会介绍如下几个操作&#xff1a; 文件写入文件读取文件移动与重命名文件删除文件夹操作查看资源状态 一、文件写入 文件写入就…

CAPL如何实现27服务解锁

在文章《CANoe-如何实现27服务解锁》里,我们介绍了诊断控制台中如何实现27解锁,如果我想在CANoe中使用CAPL程序解锁的话,又要如何实现呢? CAPL脚本也是通过模拟手动操作来实现27解锁,所以步骤为: 发送10 03发送27 01接收67 01,获取seed值根据seed值和算法,计算出key值…

http post协议实现简单的rpc协议,WireShark抓包分析

文章目录 1.http 客户端-RPC客户端1.http 服务端-RPC服务端3.WireShark抓包分析3.1客户端到服务端的HTTP/JSON报文3.2服务端到客户端的HTTP/JSON报文 1.http 客户端-RPC客户端 import json import requests# 定义 RPC 客户端类 class RPCClient:def __init__(self, server_url…

ZYNQ linux调试LCD7789

一,硬件管脚 1,参数解释和实物 LVGL是一个开源的图形库,主要用于MCU上屏幕UI的部署,功能完善,封装合理,可裁切性强,也可以实现Linux上fbx的部署。LVGL官网LVGL - Light and Versatile Embedded Graphics Library 每根线的作用