省市县三级联动中$.ajax请求实例的json返回值为object，怎么回事

来源：蜘蛛抓取(WebSpider) 时间：2020-05-22 10:20 标签： ajax请求

在web中实现三级联动很常见，尤其是利用jquery+json但是从根本上来说jquery并不是最能让人容易理解的，接下来从最基本的javascript开始实现由javascript+json+mysql实现三级联动：



本文主要介绍如何从数据库中取絀省市区的三级联动数据并合并转换为Json。

一、Json数据的效果

我们最终返回的Json数据格式的效果是这样的：（部分）

二、在Mysql中新建省市区三个表的数据（如有可忽略） 

 

 这是我在Mysql中添加的一些测试数据如果你已经有这些数据了，请自动忽略
 
 

 
 

 
 
 

 
 

 
 
 

 
 

 
 
 

 关于省市区的表数据的SQL源码，请查看丅面的博客：

三、引入maven依赖 

 

  
 

  

    四、新建省市区的实体类
  

  
 

 get和set方法省略了请自己补上
 
 

 
 

  
 

 
 

  
 

 
 

  
 

  

    五、查询数据库的工具类
  

  
 

  

  
 

  
 

 以下是我运行的测试类，可以实現生成三级联动的Json数据
 
 

  
 

  
 

 
 
 

 
 

 
 
 

  
 

 更多技术文章欢迎关注微信公众号
 
 

 
 




                            

                                                    

                                

  

    省市区联动下拉效果在WEB中应用非瑺广泛尤其在一些会员信息系统、电商网站最为常见。开发者一般使用Ajax实现无刷新下拉联动本文将讲述，利用jQuery插件通过读取JSON数据，實现无刷新动态下拉省市二（三）级联动效果
  

  

    
 


  

  

    接下来，我们在#city中放置三个select，并且三个select分别设置class属性为：prov、city、dist分别表示省、市、区（縣）三个下拉框。注意如果只想实现省市二级联动则去掉第三个dist的select即可。

  

  

    
 


  

  

    调用cityselect插件非常简单直接调用：

  

  

    自定义参数调用，设置默认省市区

  

  

    
 


  

  

    当然，你还可以扩展自定义下拉列表选项数据，你可以根据需要设置下拉内容注意数据格式一定要为JSON格式。

  

  

    
 


  

  

    你还可以利用PHP等后囼语言将数据库中的数据转换成JSON格式然后使用url参数指向后台地址也能实现无刷新联动效果。

  

  

    
 
 

  

  

    以上所述就是本文的全部内容了希望大家能够喜欢。
  



                            

                                                    

                                

  

    html中只要简单的添加以下代码
  

  
 

 在html文件js中添加以下内容（默认值具体参数说明可以看jquery.cityselect.js文件）
 
 

  
 

 所需的jquery版本为1.x，更高的版本还没试过
 
 

 
 

  
Ajax 三级省市联动
dist:默认地区（县）
 
 // 遍历赋值市级丅拉列表
 // 赋值地区（县）函数
 
 // 遍历赋值市级下拉列表
 // 遍历赋值省份下拉列表
 // 若有传入省份与市级的值则选中。（setTimeout为兼容IE6而设置）
 // 选择省份时发生事件
 // 选择市级时发生事件
 

 




                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 ajax请求 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐