ajax三级联动实现代码

前端  /  管理员 发布于 4年前   443

本文实例为大家分享了ajax三级联动展示的具体代码，供大家参考，具体内容如下

1. test.php

<script src="//article/../jquery-1.11.2.min.js"></script><script src="//article/sanji.js"></script><title>无标题文档</title></head><body><h1>三级联动</h1><div id="sanji"></div></body></html>

2. sanji.js

// JavaScript Document$(document).ready(function(e) { //找到ID=SANJI的DIV，造三个下拉扔进去 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>");  //加载省的数据 LoadSheng(); //加载市的数据 LoadShi(); //加载区的数据 LoadQu();  //给省的下拉加点击事件 $("#sheng").click(function(){   //重新加载市   LoadShi();   //重新加载区   LoadQu();  }) //给市的下拉加点击事件 $("#shi").click(function(){   //重新加载区   LoadQu();  }) });//加载省份的方法function LoadSheng(){ //省的父级代号 var pcode = "0001"; $.ajax({  async:false,  url:"chuli.php",  data:{pcode:pcode},  type:"POST",  dataType:"TEXT",  success: function(data){   var hang = data.trim().split("|");   var str = "";   for(var i=0;i<hang.length;i++)   {    var lie = hang[i].split("^");    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";   }   $("#sheng").html(str);  } });}//加载市的方法function LoadShi(){ //找市的父级代号 var pcode = $("#sheng").val(); $.ajax({  async:false,  url:"chuli.php",  data:{pcode:pcode},  type:"POST",  dataType:"TEXT",  success: function(data){   var hang = data.trim().split("|");   var str = "";   for(var i=0;i<hang.length;i++)   {    var lie = hang[i].split("^");    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";   }   $("#shi").html(str);  } });}//加载区的方法function LoadQu(){ //找区的父级代号 var pcode = $("#shi").val(); $.ajax({  url:"chuli.php",  data:{pcode:pcode},  type:"POST",  dataType:"TEXT",  success: function(data){   var hang = data.trim().split("|");   var str = "";   for(var i=0;i<hang.length;i++)   {    var lie = hang[i].split("^");    str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";   }   $("#qu").html(str);  } });}

3. chuli.php

<?php//给一个父级代号，返回该父级代号下所有的子地区require "DBDA.class.php";$db=new DBDA();$pcode=$_POST["pcode"];$sql="select areacode,areaname from chinastates where parentareacode='{$pcode}'";echo $db->StrQuery($sql);

引用的封装类里面返回字符串的方法

<?phpclass DBDA{ public $host = "localhost"; public $uid = "root"; public $pwd = "123"; public $dbname = "test_123"; //执行SQL语句返回相应的结果 //$sql 要执行的SQL语句 //$type 代表SQL语句的类型，0代表增删改，1代表查询 function query($sql,$type=0) {  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);    $result = $db->query($sql);    if($type)  {   //如果是查询，显示数据   return $result->fetch_all();  }  else  {   //如果是增删改，返回true或者false   return $result;  } }  //返回字符串的方法 public function strquery($sql,$type=1) {  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);  $result = $db->query($sql);  $arr = $result->fetch_all();  $str="";  foreach($arr as $v)  {   $str = $str.implode("^",$v)."|";  }    $str = substr($str,0,strlen($str)-1);  return $str; }  //返回JSON function JSONQuery($sql,$type=1) {  $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);  $r = $db->query($sql);    if($type==1)  {   return json_encode($r->fetch_all(MYSQLI_ASSOC));  }  else  {   return $r;  } }}

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


  • 上一条：
    golang、python、php、c++、c、java、Nodejs性能对比
    下一条：
    H5移动开发Ajax上传多张Base64格式图片到服务器

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客