ajax三级联动实现代码

更新时间：2017年05月23日 09:41:29 作者：ChrissZhao

这篇文章主要为大家详细介绍了ajax三级联动的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;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);

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

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

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

您可能感兴趣的文章:

浅谈Bootstrap的DatePicker日期范围选择
下面小编就为大家带来一篇浅谈Bootstrap的DatePicker日期范围选择。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
AJAX原理以及axios、fetch区别实例详解
前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch,下面这篇文章主要给大家介绍了关于AJAX原理以及axios、fetch区别的相关资料,需要的朋友可以参考下
2022-04-04
菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)
Ajax是Asynchronous JavaScript and XML，其核心是通过XMLHttpRequest对象以一种异步的方式向服务器发送请求，并通过该对象接收请求返回的数据，从而完成人机交互的数据操作(呵呵、、、说的有点吓人！)
2012-11-11
Ajax上传图片的本质
这篇文章主要介绍了Ajax上传图片的本质的相关资料,需要的朋友可以参考下
2016-03-03
Ajax实现phpcms 点赞功能实例代码
这篇文章主要介绍了Ajax实现phpcms 点赞功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-03-03
herf=#导致Ajax请求时没有向后台发送数据
当点击重命名进行Ajax请求时，并没有向后台发送数据而是直接跳转到了首页，后来发现是这个herf=#惹的祸
2014-05-05
无框架 Ajax分页(原创)
最近想做一个Ajax的功能，网上一搜几乎全是基于某某框架的Ajax分页，要么需给页面加上<scriptManager></scriptManager>，要么需引入某dll，要么需使用类似于jquery的框架。
2009-08-08
Ajax中通过JS代码自动获取表单元素值的示例代码
如果表单元素不多的情况我们常常会通过GET方式来获取表单元素值，但如果表单元素非常多，此时就需要用POST方式来获取表单元素值，那么如何来获取表单元素值呢
2014-09-09
Ajax实现文件下载
本文给大家介绍ajax实现文件下载相关知识，涉及到ajax文件下载方面的知识，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起学习吧
2016-03-03
Ajax+smarty技术实现无刷新分页
这篇文章主要介绍了Ajax+smarty技术实现无刷新分页的相关资料,需要的朋友可以参考下
2016-03-03