ajax实现三级联动最基本的概念-js教程-PHP中文网

首页

web前端

js教程

ajax实现三级联动最基本的概念

php中世界最好的语言

Apr 02, 2018 pm 02:55 PM

ajax 基本联动

这次给大家带来ajax实现三级联动最基本的概念，ajax实现三级联动的注意事项有哪些，下面就是实战案例，一起来看一下。

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

1.首先在一个页面上布置一个p 方便日后引用方法

<body>
<p id="sanji">//p的id为“sanji”
</p>

登录后复制

2.sanji js处理页面

$(document).ready(function(){
    
   //向p里面放三个下拉菜单
  var str = "<select id=&#39;sheng&#39;></select>
    <select id=&#39;shi&#39;></select>
    <select id=&#39;qu&#39;></select>";
  //给三个下拉列表定义 str 变量
  
  $("#sanji").html(str);
  FillSheng();
  FillShi();
  FillQu();//Sheng Shi Qu的逻辑顺序 
  
   $("#sheng").change(function(){
     FillShi();
     FillQu();
   })//给sheng菜单添加点击事件
   $("#shi").change(function(){
   FillQu();
  })//给shi菜单添加点击事件
});//页面加载完成之后过来执行某些代码

登录后复制

3.填充sheng方法

function FillSheng()
{
 
  var pcode = "";//定义一个变量
  $.ajax({
     
     url:"chuli.php",
     data:{pcode:pcode},
     type:"POST",
     dataType:"TEXT",
     success:function(data){
              var hang = data.split("^");
              str +="<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
      }
     $("#sheng").html(str);
     });
}

登录后复制

2.填充shi方法

function FillShi()
{
 var pcode = $("#sheng").val();
 $.ajax({
   async:false,
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
     }
     $("#shi").html(str);
    }
  });
}

登录后复制

3.填充qu方法

function FillQu()
{
 var pcode = $("#shi").val();
 $.ajax({
   url:"chuli.php",
   data:{pcode:pcode},
   type:"POST",
   dataType:"TEXT",
   success: function(data){
     var hang = data.split("|");
     var str = "";
     for(var i=0;i<hang.length;i++)
     {
      var lie = hang[i].split("^");
      str += "<option value=&#39;"+lie[0]+"&#39;>"+lie[1]+"</option>";
     }
     $("#qu").html(str);
    }
  });
}

登录后复制

4.chuli页面

<?php
include("DBDA.class.php");
$db = new DBDA();
$pcode = $_POST["pcode"];
$sql = "select * from chinastates where parentareacode=&#39;{$pcode}&#39;";
echo $db->StrQuery($sql);

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7529

CakePHP 教程

1378

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

征途IPx经典动画《西游记》西行征途无畏无惧 Jun 10, 2024 pm 06:15 PM

穿越苍茫征途，踏足西游之境！今日，征途IP正式宣布将与央视动画《西游记》展开跨界合作，共同打造一场融合了传统与创新的文化盛宴！此次携手，不仅标志着两大国产经典品牌的深度合作，更彰显了征途系列在弘扬中国传统文化道路上的不懈努力与坚持。征途系列自诞生以来，便凭借其深厚的文化底蕴和多元化的游戏玩法，受到玩家们的喜爱。在文化传承方面，征途系列更是始终保持着对中国传统文化的敬意与热爱，将传统文化元素巧妙地融入游戏，为玩家们带来了更多的乐趣和启发。而央视动画《西游记》则是陪伴了一代又一代人成长的经典之作，其

解决jQuery AJAX请求遇到403错误的方法 Feb 20, 2024 am 10:07 AM

标题：解决jQueryAJAX请求出现403错误的方法及代码示例403错误是指服务器禁止访问资源的请求，通常会导致出现这个错误的原因是请求缺少权限或者被服务器拒绝。在进行jQueryAJAX请求时，有时候会遇到这种情况，本文将介绍如何解决这个问题，并提供代码示例。解决方法：检查权限：首先要确保请求的URL地址是正确的，同时验证是否有足够的权限来访问该资

解决jQuery AJAX请求403错误的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一个流行的JavaScript库，用于简化客户端端的开发。而AJAX则是在不重新加载整个网页的情况下，通过发送异步请求和与服务器交互的技术。然而在使用jQuery进行AJAX请求时，有时会遇到403错误。403错误通常是服务器禁止访问的错误，可能是由于安全策略或权限问题导致的。在本文中，我们将讨论如何解决jQueryAJAX请求遭遇403错误

炸鸡大业，不容差池！《逆水寒》联动肯德基尬上天，玩家社死'闻鸡起舞” Apr 17, 2024 pm 06:34 PM

日期，《逆水寒》官宣将于4月19号-5月12号与肯德基展开联动，但联动的具体内容却让很多人蚌埠住了，连番直说“尬上天了”、“要社死了”！原因就出在这次主题活动的口号上，曾经见识过《原神》《崩铁》肯德基联动的小伙伴肯定有印象，什么“异世相遇、尽享美味”，到了《逆水寒》这里就成了：对店员喊出「神候府查案，尔等何人?」店员需回答「炸鸡大业，不容差池!」对员工的培训指南：绝对不能笑！不止这个，这次联动还办起了舞蹈大赛，到主题店做出“闻‘基’起舞”舞蹈动作，还能获得一个摇摇乐小立牌。尬，太尬了！但就是要这

双厨狂喜！《阴阳师》X《初音未来》联动3月6日开启 Feb 22, 2024 pm 06:52 PM

网易《阴阳师》手游在今日宣布，阴阳师×初音未来限定联动将于3月6日正式开始。联动限定SSR初音未来（CV：藤田咲）、SSR镜音铃·连（CV：下田麻美）即将降临平安京！联动线上特别演出活动3月9日在游戏内正式开启~

如何解决jQuery AJAX报错403的问题？ Feb 23, 2024 pm 04:27 PM

如何解决jQueryAJAX报错403的问题？在开发网页应用程序时，经常会使用jQuery来发送异步请求。然而，有时候在使用jQueryAJAX时可能会遇到错误代码403，表示服务器禁止访问。这种情况通常是由服务器端的安全设置所导致的，但可以通过一些方法来解决这个问题。本文将介绍如何解决jQueryAJAX报错403的问题，并提供具体的代码示例。一、使

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

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