ajax三级联动的实现方法

Ajax实现了三级联动，相当于写了一个小插件。用的时候可以直接用。在这里，我使用数据库中的chinastates表。

数据库中的内容很多，三级联动中的区域名称都在里面，采用代码子代码的方式

比如在北京，代码名是11，下面的北京的子代码是11，北京的主代码是1101，下面的区域的子代码是1101。

如果想要在页面上显示三级链接的内容，只需要在页面上构建一个div

div id='三际'/div

下面考虑的是有三列省市，使用下拉列表，所以应该使用option/option，因为是用js和jquery写的，所以首先要考虑的是引入jquery包和js文件，然后写三个下拉列表

script src=' http : jquery-3 . 1 . 1 . min . js '/script script src=' http : sanji . js '/script $(文档)。ready(function(e){ var str=' select id=' sheng '/select select select id=' Shi '/select select select id=' qu '/select '；//写三个下拉列表，放在div $(' #三际')中。html(字符串)；full sheng()；full Shi()；full qu()；$('#sheng ')。change(function(){ full Shi()；full qu()；}) $('#shi ')。change(function(){ full qu()；})//加载省信息函数full sheng(){ var pcode=' 0001 '；//查找数据$。ajax根据父代码({async: false，//URL :' sanjichuli.php '、data: {pcode3360pcode}、type:' post '、datatype3360' JSON '、success:函数以异步方式运行。for中的Traverse数组(数据中的var j)//js由for { str=' option value=' data[j]表示。区号''数据[j]。area name '/option '；} $('#sheng ')。html(字符串)；} })}//加载城市信息函数fullshi () {var pcode=$ ('# sheng ')。val()；$.Ajax ({async: false，URL :' sanjichuli.php '，data: {pcode: pcode}，type:' post '，datatype 3360' JSON '，success3360函数(data){//这里传递的数据是for(var j in data)中的Traverse数组//js由for { str=' option value=' data[j]表示。区号''数据[j]。area name '/option '；} $('#shi ')。html(字符串)；} })}//information function full qu(){ varp code=$(' # Shi ')。val()；$.Ajax ({URL :' sanjichuli.php '，data: {pcode:pcode}，type:' post '，datatype3360' JSON '，success3360函数(data){//这里传递的数据是数组str=for中的Traverse数组(数据中的var j)//js由for { str=' option value=' data[j]表示。区号''数据[j]。area name '/option '；} $('#qu ')。html(字符串)；}})})此处使用的是DataType :“JSon”。在此之前，使用的是“TEXT”JSON，因此我们需要遍历数组并获取每一条数据。在JS中，我们使用for(){}遍历数组。

最后要说的是处理页面，这是一个纯PHP页面。因为dataType之前使用了JSON，所以处理页面输出也应该是一个数组。在这种情况下，处理页面不能用字符串拼接。在这里，我调用了数据库的包页面，并编写了一个JsonQuery方法。

函数JsonQuery($sql，$ type=1){ $ db=new MySQL($ this-host，$this-uid，$this-pwd，$ this-dbname)；$ result=$ db-query($ SQL)；if($ type==' 1 '){ $ arr=$ result-fetch _ all(MYSQLI _ ASSOC)；返回JSON _ encode($ arr)；} else { return $ result}}那么写处理页的时候就非常方便使用了

？PHP $ pcode=$ _ POST[' pcode ']；include(' DADB . class . PHP ')；$ db=new DADB()；$sql='从China States WHERE parent area code=' { $ pcode } ' '中选择*；echo $ db-JSonquery($ SQL)；这样三级联动就可以完成了，如下图所示

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。