jquery和ajax实现省市区三级联动封装和不封装两种方式-js教程-PHP中文网

首页

web前端

js教程

jquery和ajax实现省市区三级联动封装和不封装两种方式

小云云

Jan 12, 2018 am 09:26 AM

ajax jquery 省市区

本文主要为大家详细介绍了jquery+ajax实现省市区三级联动的相关代码，包括封装和不封装两种方式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

首先，要实现如下图效果，

1、要理清思路：

先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容，第三个同理。

2、用到的数据库表：Chinastates表

规律：根据国家级（中国）的areacode查询省级(如：北京) ; 根据省级的areacode查询市级（如：北京市辖）；根据市级的areacode查询区级（如东城区）

第一种方式：没有用到封装，数据读取较慢，可以看看原理，这样在第二种方式封装时就容易多了。

代码如下：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script src="../jquery-1.11.2.min.js"></script>
 </head>
 <body>
 <select id="sheng"></select>
 <select id="shi"></select>
 <select id="qu"></select>
 </body>
</html>
<script type="text/javascript"> 
 $(document).ready(function(e){ 
 //输出省
 var code = "0001";
 $.ajax({ 
  async:false,
  //取消异步
  url:"chuli.php",
  data:{code:code},
  type:"POST",
  dataType:"TEXT",
  success:function(data){    
   var hang = data.trim().split("|"); //trim()去空格
   var str=""; 
   for(var i=0;i<hang.length;i++)
   {
   var lie = hang[i].split("^");
   str = str+"<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
   }
   $("#sheng").html(str);  
  }   
 });
//输出市
 $("#sheng").click(function(){ 
 var code2=$("#sheng").val(); 
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code2},
  type:"POST",
  dataType:"TEXT",
 success:function(data2){
 
  var hang2 = data2.trim().split("|");
 
  var str2 ="";
  for(var i=0;i<hang2.length;i++)
  {
   var lie2=hang2[i].split("^");
   str2 = str2 +"<option value =&#39;"+lie2[0]+"&#39;>"+lie2[1]+"</option>";
  }
  $("#shi").html(str2);
  }  
 }); 
 })
//输出区县
$("#shi").click(function(){
 var code3=$("#shi").val();
 
 $.ajax({
  async:false,
  url:"chuli.php",
  data:{code:code3},
  type:"POST",
  dataType:"TEXT",
  success:function(data3){
  var hang3 = data3.split("|");
  var str3 ="";
  for(var i=0;i<hang3.length;i++)
  {
   var lie3=hang3[i].split("^");
   str3 = str3 +"<option value =&#39;"+lie3[0]+"&#39;>"+lie3[1]+"</option>";
  }
  $("#qu").html(str3);
  }  
 });
 })
})
</script>

登录后复制

期间出现的问题：每个下拉列表的第一个数据输不出来：是因为每个下拉列表的第一个数据的value值都带有空格！！！所以在输出data时要去空格！！！

data返回的值可能带有空格换行等，所以要用trim()方法去空格！！！

第二种方式：封装成插件，以后可以随时调用（重要）

（1）主页面：

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title><br>//引入jquery包
 <script src="../jquery-1.11.2.min.js"></script><br>//引用我们自己封装的js文件
 <script src="sanji.js"></script>
 </head>
 <body><br>//id要与封装的js插件中一致
 <p id="sanji"></p>
 </body>
</html>

登录后复制

（2）我们自己封装的js插件

$(document).ready(function(e){
 //扔三个下拉列表到主页面建的p中
 $("#sanji").html("<select id=&#39;sheng&#39;></select><select id=&#39;shi&#39;></select><select id=&#39;qu&#39;></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: { code: 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=&#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#sheng").html(str);
 }
 });
}

//加载市省的下拉列表
function LoadShi() {
 var pcode = $("#sheng").val();
 $.ajax({
 async: false,
 url: "chuli.php",
 data: { code: 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 = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#shi").html(str);
 }
 });
}

//加载省的下拉列表
function LoadQu() {
 var pcode = $("#shi").val();
 $.ajax({
 url: "chuli.php",
 data: { code: 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 = &#39;" + lie[0] + "&#39;>" + lie[1] + "</option>";
  }
  $("#qu").html(str);
 }
 });
}

登录后复制

其次就是处理页面(两种方法都用到的)：chuli.php

<?php
$code=$_POST["code"];
require "DB.class.php";
$db=new DB();
$sql="select areacode,areaname from chinastates where parentareacode=&#39;{$code}&#39;";
$str=$db->strquery($sql);
echo $str;

登录后复制

最后就是封装的类文件：DB.class.php

function strquery($sql)
 {
 $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;
  }
}
?>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7323

Java教程

1625

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

jQuery中如何使用PUT请求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT请求方式？在jQuery中，发送PUT请求的方法与发送其他类型的请求类似，但需要注意一些细节和参数设置。PUT请求通常用于更新资源，例如更新数据库中的数据或更新服务器上的文件。以下是在jQuery中使用PUT请求方式的具体代码示例。首先，确保引入了jQuery库文件，然后可以通过以下方式发送PUT请求：$.ajax({u

如何使用Ajax从PHP方法中获取变量？ Mar 09, 2024 pm 05:36 PM

使用Ajax从PHP方法中获取变量是Web开发中常见的场景，通过Ajax可以实现页面无需刷新即可动态获取数据。在本文中，将介绍如何使用Ajax从PHP方法中获取变量，并提供具体的代码示例。首先，我们需要编写一个PHP文件来处理Ajax请求，并返回所需的变量。下面是一个简单的PHP文件getData.php的示例代码：

jQuery小技巧：快速修改页面所有a标签的文本 Feb 28, 2024 pm 09:06 PM

标题：jQuery小技巧：快速修改页面所有a标签的文本在网页开发中，我们经常需要对页面中的元素进行修改和操作。在使用jQuery时，有时候需要一次性修改页面中所有a标签的文本内容，这样可以节省时间和精力。下面将介绍如何使用jQuery快速修改页面所有a标签的文本，同时给出具体的代码示例。首先，我们需要引入jQuery库文件，确保在页面中引入了以下代码：&lt

使用jQuery修改所有a标签的文本内容 Feb 28, 2024 pm 05:42 PM

标题：使用jQuery修改所有a标签的文本内容jQuery是一款流行的JavaScript库，被广泛用于处理DOM操作。在网页开发中，经常会遇到需要修改页面上链接标签（a标签）的文本内容的需求。本文将介绍如何使用jQuery来实现这个目标，并提供具体的代码示例。首先，我们需要在页面中引入jQuery库。在HTML文件中添加以下代码：

PHP 与 Ajax：创建动态加载内容的解决方案 Jun 06, 2024 pm 01:12 PM

Ajax（异步JavaScript和XML）允许在不重新加载页面情况下添加动态内容。使用PHP和Ajax，您可以动态加载产品列表：HTML创建一个带有容器元素的页面，Ajax请求加载数据后将数据添加到该元素中。JavaScript使用Ajax通过XMLHttpRequest向服务器发送请求，从服务器获取JSON格式的产品数据。PHP使用MySQL从数据库查询产品数据，并将其编码为JSON格式。JavaScript解析JSON数据，并将其显示在页面容器中。点击按钮触发Ajax请求，加载产品列表。

了解jQuery中eq的作用及应用场景 Feb 28, 2024 pm 01:15 PM

jQuery是一种流行的JavaScript库，被广泛用于处理网页中的DOM操作和事件处理。在jQuery中，eq()方法是用来选择指定索引位置的元素的方法，具体使用方法和应用场景如下。在jQuery中，eq()方法选择指定索引位置的元素。索引位置从0开始计数，即第一个元素的索引是0，第二个元素的索引是1，依此类推。eq()方法的语法如下：$("s

PHP 与 Ajax：提高 Ajax 安全性的方法 Jun 01, 2024 am 09:34 AM

为了提升Ajax安全性，有几种方法：CSRF保护：生成令牌并将其发送到客户端，在请求中添加到服务器端进行验证。XSS保护：使用htmlspecialchars()过滤输入，防止恶意脚本注入。Content-Security-Policy头：限制恶意资源加载，指定允许加载脚本和样式表的来源。验证服务器端输入：验证从Ajax请求接收的输入，防止攻击者利用输入漏洞。使用安全Ajax库：利用jQuery等库提供的自动CSRF保护模块。