主页 > 知识库 > ajax三级联动实现代码

ajax三级联动实现代码

热门标签:Linux服务器 团购网站 阿里云 服务器配置 科大讯飞语音识别系统 Mysql连接数设置 银行业务 电子围栏

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

1. test.php

script src="../jquery-1.11.2.min.js">/script>
script src="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;ihang.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;ihang.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;ihang.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);

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

?php
class 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;
  }
 }
}

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

您可能感兴趣的文章:
  • PHP+Mysql+Ajax+JS实现省市区三级联动
  • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
  • AJAX省市区三级联动下拉菜单(java版)
  • AJAX和WebService实现省市县三级联动具体代码
  • ajax.net +jquery 无刷新三级联动的实例代码
  • ajax实现无刷新省市县三级联动
  • Ajax商品分类三级联动的简单实现(案例)
  • jquery+ajax实现省市区三级联动效果简单示例
  • Ajax+php实现商品分类三级联动
  • ajax实现三级联动的基本方法

标签:萍乡 大理 蚌埠 衢州 江苏 枣庄 广元 衡水

巨人网络通讯声明:本文标题《ajax三级联动实现代码》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266