利用Ajax请求后端_省级地址三级联动

案例说明:

本案例是利用Ajax技术向后台请求地址数据,效果如下:

步骤如下:
1. 首先利用bootstrap框架创建骨架:

前端代码如下:

2. 提前创建好后台服务器,为前台发送数据作准备,这小编用express框架,可以根据自己的情况来合理 的设置:

3. 到这里,前端html和后台服务器的代码已完成,开始写Js的代码. 其实js的代码主要是利用ajax向后台发送数据,而这个ajax是小编自己用原生的js封装的代码,所以用起来那叫一个爽! 小伙伴们可以自己尝试封装或者用JQuery封装的ajax可以哈, 嘿嘿,废话不多说,直接上代码:
当初次加载页面时,前端自动向后台发送get请求,获取后台的数据.加载出各省的数据

对应后台服务器:

对应的前端效果:

4. 当我们选择省的数据后,则对应的表单元素会触发一个change事件,所以想后台继续发送请求,

后台接收参数,处理数据,返回结果

5. 市级数据获取后,刚我们选择改变市级数据后,则相应的表单元素也会相应的触发一个change改变的事件,触发的事件函数为:

后台同样的接收数据并处理,返回相应的结果

走到这一步,那么我们的省级三级联动就完成了,小伙伴感觉是不是很简单呀!嘿嘿,没错,就是这么简单,哈哈,希望有问题的前端小伙伴发私信讨论问题,下期见哈…