PHP+ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單功能示例

更新時(shí)間：2018年08月10日 09:23:56 作者：JohnKenneth

這篇文章主要介紹了PHP+ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單功能,涉及php結(jié)合ajax的數(shù)據(jù)交互與頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了PHP+ajax實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)菜單功能。分享給大家供大家參考，具體如下：

如何實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)

工作原理

二級(jí)聯(lián)動(dòng)在開發(fā)中是比較常見的一個(gè)技術(shù)點(diǎn)，它主要運(yùn)用了JS的局部刷新技術(shù)ajax,不同于一般頁(yè)面全局刷新，它只會(huì)刷新我們需要改變值的地方，我們首先看下它的工作流程。

第一步：我們會(huì)向后臺(tái)發(fā)送一個(gè)請(qǐng)求
第二步：后臺(tái)接受請(qǐng)求后，會(huì)返回給我們一個(gè)值
第三步：將值用JS呈現(xiàn)在頁(yè)面中

HTML代碼

<html>
<head>
<title>www.dhdzp.com 二級(jí)聯(lián)動(dòng)</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
#area-box{width:500px;height:400px;margin:0 auto;border:0px solid #dddddd;text-align:center;}
.area-select{width:200px;height:30px;margin-top:30px;margin-left:30px;}
</style>
<head>
<body>
  <div id="area-box">
    <select class="area-select" id='address'>
      <option value="0">請(qǐng)選擇省份</option>
      <option value="1">四川</option>
      <option value="2">河北</option>
      <option value="3">湖南</option>
    </select>
    <select class="area-select" id="city">
      <option>請(qǐng)選擇城市</option>
    </select>
  </div>
  <script>
  $(function(){
    //初始化數(shù)據(jù)
    var url = 'address.php'; //后臺(tái)地址
    $("#address").change(function(){ //監(jiān)聽下拉列表的change事件
      var address = $(this).val(); //獲取下拉列表選中的值
      //發(fā)送一個(gè)post請(qǐng)求
      $.ajax({
        type:'post',
        url:url,
        data:{key:address},
        dataType:'json',
        success:function(data){ //請(qǐng)求成功回調(diào)函數(shù)
          var status = data.status; //獲取返回值
          var address = data.data;
          if(status == 200){ //判斷狀態(tài)碼，200為成功
            var option = '';
            for(var i=0;i<address.length;i++){ //循環(huán)獲取返回值，并組裝成html代碼
              option +='<option>'+address[i]+'</option>';
            }
          }else{
            var option = '<option>請(qǐng)選擇城市</option>'; //默認(rèn)值
          }
          $("#city").html(option); //js刷新第二個(gè)下拉框的值
        },
      });
    });
  });
  </script>
</body>

PHP代碼

<?php
  $key = $_POST['key']; //獲取值
  $address[1] = array('成都','綿陽(yáng)','德陽(yáng)');
  $address[2] = array('石家莊','唐山','秦皇島');
  $address[3] = array('長(zhǎng)沙','株洲','湘潭');
  if(!empty($address[$key])){ //有值，組裝數(shù)據(jù)
    $result['status'] = 200;
    $result['data'] = $address[$key];
  }else{ //無值，返回狀態(tài)碼220
    $result['status'] = 220;
  }
  echo json_encode($result); //返回JSON數(shù)據(jù)
?>

運(yùn)行效果：