Heim > Artikel > Backend-Entwicklung > So implementieren Sie ein sekundäres Verknüpfungsmenü in PHP
So implementieren Sie ein sekundäres Verknüpfungsmenü in PHP
- 藏色散人Original
- 2021-03-26 09:56:562907Durchsuche
So implementieren Sie ein sekundäres Verknüpfungsmenü: Erstellen Sie zuerst HTML-Dateien und PHP-Dateien, schreiben Sie dann Front-End-Code und Back-End-Logikcode und senden Sie schließlich JS, um den Wert anzuzeigen die Seite.
Die Betriebsumgebung dieses Artikels: Windows 7-System, PHP-Version 7.1, DELL G3-Computer
PHP + Ajax-Implementierung einer sekundären Verknüpfungsmenüfunktion – Beispiel
So erreichen Sie eine sekundäre Verknüpfung
Funktionsprinzip
Die Verknüpfung auf zweiter Ebene ist ein relativ häufiger technischer Punkt in der Entwicklung. Sie verwendet hauptsächlich die lokale Aktualisierungstechnologie Ajax und aktualisiert nur die Stellen, an denen wir den Wert ändern müssen Schauen Sie sich zunächst den Arbeitsablauf an.
- Schritt 1: Wir senden eine Anfrage an den Hintergrund
- Schritt 2: Nachdem der Hintergrund die Anfrage akzeptiert hat, gibt er uns einen Wert zurück
- Schritt 3: Präsentieren Sie den Wert auf der Seite mit JS
HTML Code
<html>
<head>
<title>www.jb51.net 二级联动</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>
<p 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>
</p>
<script>
$(function(){
//初始化数据
var url = 'address.php'; //后台地址
$("#address").change(function(){ //监听下拉列表的change事件
var address = $(this).val(); //获取下拉列表选中的值
//发送一个post请求
$.ajax({
type:'post',
url:url,
data:{key:address},
dataType:'json',
success:function(data){ //请求成功回调函数
var status = data.status; //获取返回值
var address = data.data;
if(status == 200){ //判断状态码，200为成功
var option = '';
for(var i=0;i<address.length;i++){ //循环获取返回值，并组装成html代码
option +='<option>'+address[i]+'</option>';
}
}else{
var option = '<option>请选择城市</option>'; //默认值
}
$("#city").html(option); //js刷新第二个下拉框的值
},
});
});
});
</script>
</body>[Empfohlenes Lernen: PHP-Video-Tutorial]
PHP-Code
<?php
$key = $_POST['key']; //获取值
$address[1] = array('成都','绵阳','德阳');
$address[2] = array('石家庄','唐山','秦皇岛');
$address[3] = array('长沙','株洲','湘潭');
if(!empty($address[$key])){ //有值，组装数据
$result['status'] = 200;
$result['data'] = $address[$key];
}else{ //无值，返回状态码220
$result['status'] = 220;
}
echo json_encode($result); //返回JSON数据
?>Wirkungseffekt:
Tatsächlich sind die Prinzipien der Verknüpfung der dritten Ebene und der Verknüpfung der zweiten Ebene dieselben , aber in anderen Fällen wiederholen Sie es einfach einmal
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein sekundäres Verknüpfungsmenü in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!