手搭手Ajax經(jīng)典基礎案例省市聯(lián)動

這篇具有很好參考價值的文章主要介紹了手搭手Ajax經(jīng)典基礎案例省市聯(lián)動。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

環(huán)境介紹

技術棧	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.P6SpyDriver
    dynamic:
      primary: sys #設置默認的數(shù)據(jù)源或者數(shù)據(jù)源組,默認值即為master
      strict: false #嚴格匹配數(shù)據(jù)源,默認false. true未匹配到指定數(shù)據(jù)源時拋異常,false使用默認數(shù)據(jù)源
      datasource:
        sys:
          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.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driver
        wms:
          url: jdbc:p6spy:mysql://xxx.xxx.xxx.136:3306/Wms?useUnicode=true&characterEncoding=UTF-8
          username: root
          password: 111111
          driver-class-name: com.p6spy.engine.spy.P6SpyDriver
#          driver-class-name: com.mysql.jdbc.Driver
        sys2:
          username: root
          password: 111111
          url: jdbc:p6spy:mysql://127.0.0.1:3306/sys?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=UTF-8
          driver-class-name: com.p6spy.engine.spy.P6SpyDriver

server:
  port: 8083

mybatis-plus:
  configuration:
    #輸出日志
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    #配置映射規(guī)則
    map-underscore-to-camel-case: true #表示支持下劃線到駝蜂的映射
    #隱藏mybatis圖標
  global-config:
    banner: false
    db-config:
      logic-delete-field: status
      logic-not-delete-value: 1
      logic-delete-value: 0
#
#mybatis:
#  mapper-locations=classpath: com/example/dao/*.xml

數(shù)據(jù)庫表

手搭手Ajax經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

MybatisX逆向工程

逆向工程：通過數(shù)據(jù)庫表接口，逆向生成java工程結(jié)構(gòu)

實體類、mapper接口、mapper映射文件、Service接口、service實現(xiàn)類

手搭手Ajax經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

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映射文件

手搭手Ajax經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

<!DOCTYPE mapper
        PUBLIC "-//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>

手搭手Ajax經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

service接口

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

service實現(xiàn)類

@Service
@DS("sys2")
public class TAreaServiceImpl extends ServiceImpl<TAreaMapper, TArea>
    implements TAreaService{

    @Autowired
    private TAreaMapper tAreaMapper;

    @Override
    public List<TArea> getALLProvince() {
        return tAreaMapper.getALLParentcodeIsNull();
    }

    @Override
    public 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){
              //清空原來的數(shù)據(jù)
                $("#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經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

? ? ??

手搭手Ajax經(jīng)典基礎案例省市聯(lián)動,ajax,前端,javascript

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

以下為原理基礎，可略

Ajax即Asynchronous Javascript And XML（異步JavaScript和XML）在 2005年被Jesse James Garrett提出的新術語，用來描述一種使用現(xiàn)有技術集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技術網(wǎng)頁應用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面，這使得程序能夠更快地回應用戶的操作。

ajax基礎

Xmlhttprequest對象是AJAX的核心對象,發(fā)送請求以及接收服務器數(shù)據(jù)的返回。

Xmlhttprequest對象,現(xiàn)代瀏覽器都是支持的,都內(nèi)置了該對象。直接用即可。

XmlHttpRequest對象基本方法：

abort():停止發(fā)送當前請求

getAllResponseHeader():獲取服務器的全部響應頭

getResponseHeader("headerLabel”):根據(jù)響應頭的名字，獲取對應的響應頭

open(“method”,”URL”,”[,asycFlag[,”userName”[,password]]]”):建立與服務器URL的連接，并設置請求的方法，以及是否使用異步請求。如果遠程服務需要用戶名、密?碼，則提供對應的信息。

send(content):發(fā)送請求。其中content是請求參數(shù)

setRequestHeader(“l(fā)abel”,”value”):在發(fā)送請求之前，先設置請求頭

XMLHttpRequest對象的簡單的屬性：

onreadystatechange:該屬性用于指定XMLHttpRequest對象狀態(tài)改變時的事件處理函數(shù)。

readyState：該屬性用于獲取XMLHttpRequest對象處理狀態(tài)

responseText:該屬性用于獲取服務器響應的XML文檔對象

status：該屬性是服務器返回的狀態(tài)碼，只有當服務器的響應已經(jīng)完成時，才會有該狀態(tài)碼

statusText:該屬性是服務器返回的狀態(tài)文本信息，只有當服務器的響應已經(jīng)完成時，才會有該狀態(tài)文本信息。

XMLHttpRequest對象的readyState屬性對應的狀態(tài)值

0：請求未初始化

1：服務器連接已建立

2：請求已收到

3：正在處理請求

4：請求已完成且響應已就緒文章來源地址http://www.zghlxwxcb.cn/news/detail-718909.html

<!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("發(fā)送ajax請求")
        //1、創(chuàng)建ajax黑心對象XMLHttpRequest
        var xhr =new XMLHttpRequest();
        //2、注冊回調(diào)函數(shù)
        //該函數(shù)在XMLHttpRequestState狀態(tài)值發(fā)生改變時被調(diào)用
        xhr.onreadystatechange = function () {
            //readyState是Ajax狀態(tài)碼
            /**
             * XMLHttpRequest對象的readyState屬性對應的狀態(tài)值
             * 0：請求未初始化
             * 1：服務器連接已建立
             * 2：請求已收到
             * 3：正在處理請求
             * 4：請求已完成且響應已就緒
             */

            console.log(xhr.readyState)
            // if (this.readyState == 4){
            //     console.log("響應結(jié)束")
            // }
            //status是http協(xié)議狀態(tài)碼
            console.log("http響應狀態(tài)碼"+this.status)
            if (this.status==404){
                alert("訪問資源不存在")
            }

            if (this.status ==200){
                //將響應信息放到div圖層中,渲染
                //innerHTML是javascript的元素屬性，和ajax的XMLHttpRequest對象無關，innerText也是javascript的元素屬性
                //innerHTML可以設置元素內(nèi)部的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>

到了這里，關于手搭手Ajax經(jīng)典基礎案例省市聯(lián)動的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！