溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎么在PHP中利用ajax實現(xiàn)一個二級聯(lián)動菜單？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
工作原理
二級聯(lián)動在開發(fā)中是比較常見的一個技術點，它主要運用了JS的局部刷新技術ajax,不同于一般頁面全局刷新，它只會刷新我們需要改變值的地方，我們首先看下它的工作流程。
第一步：我們會向后臺發(fā)送一個請求
第二步：后臺接受請求后，會返回給我們一個值
第三步：將值用JS呈現(xiàn)在頁面中
HTML代碼
<html> <head> <title>www.jb51.net 二級聯(lián)動</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">請選擇省份</option> <option value="1">四川</option> <option value="2">河北</option> <option value="3">湖南</option> </select> <select class="area-select" id="city"> <option>請選擇城市</option> </select> </div> <script> $(function(){ //初始化數(shù)據(jù) var url = 'address.php'; //后臺地址 $("#address").change(function(){ //監(jiān)聽下拉列表的change事件 var address = $(this).val(); //獲取下拉列表選中的值 //發(fā)送一個post請求 $.ajax({ type:'post', url:url, data:{key:address}, dataType:'json', success:function(data){ //請求成功回調函數(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>請選擇城市</option>'; //默認值 } $("#city").html(option); //js刷新第二個下拉框的值 }, }); }); }); </script> </body>
PHP代碼
<?php
$key = $_POST['key']; //獲取值
$address[1] = array('成都','綿陽','德陽');
$address[2] = array('石家莊','唐山','秦皇島');
$address[3] = array('長沙','株洲','湘潭');
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ù)
?>運行效果：
關于怎么在PHP中利用ajax實現(xiàn)一個二級聯(lián)動菜單問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業(yè)資訊頻道了解更多相關知識。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
