欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

如何利用Ajax实现地区三级联动详解

程序员文章站 2022-03-02 08:26:35
前言:利用ajax来实现一个地区的三级联动,用java代码来读json文件,先eclipse做一个简单的,最基础的。(json我用的jackson来解析,也可用fastjson-阿里巴巴的等还有很多)...

前言:

利用ajax来实现一个地区的三级联动,用java代码来读json文件,先eclipse做一个简单的,最基础的。(json我用的jackson来解析,也可用fastjson-阿里巴巴的等还有很多)提供代码,思路之类的,注释也没有自己去想去琢磨出来的思路好

first:首先先要熟悉json文件,并要想好利用什么类型去解析,这是最难的,最好找一个没人的地方戴上耳机(对于初学)我是用maven来做的用到的jar坐标 :

文件位置:

如何利用Ajax实现地区三级联动详解

second:首先创建一个html文件 three.html

如何利用Ajax实现地区三级联动详解

如何利用Ajax实现地区三级联动详解

加了一个字体居中和大小的样式以至于不会太难看,太原生

首先来实现–省--的局部刷新,利用ajax

然后来写对应的provincecontroller.class的代码(主要是逻辑,为什么我要用list<map<string,object>>类型)

在three.html添加改变事件

代码比较简单,就是跟简单的清空 赋值 取值

再写对应的citycontroller.class(代码类似)我为什么还会强转list<map<string,object>>类型

不懂的话,可以先看一看city_code.json文件,多想一想

继续来three.html

代码雷同以至于villagecontroller.class也是雷同,加了一些判断而已多了一个循环,

完结:只提供了代码,但是为什么这样何不自己去想一想?

json地区文件下载:

关注公众号 “程序员零距离” 回复 “201231” 即可下载

如何利用Ajax实现地区三级联动详解

↑关注上方公众号回复 “201231” 即可下载↑

思考?可不可以用xml文件来代替json文件?将jackson换成jsoup来解析?

到此这篇关于如何利用ajax实现地区三级联动详解的文章就介绍到这了,更多相关ajax实现地区三级联动内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!