php:
<?php//向用戶端返回所有的商品類別，以JSON字串格式header('Content-Type: application/json');$db = [['tno'=>101, 'tname'=>'電腦'],['tno'=>102, 'tname'=>'數位相機'],['tno'=>103, 'tname'=>'手機'],['tno'=>104, 'tname'=>'洗衣機']];$jsonString = json_encode($db);echo $jsonString;?>
html:
<!DOCTYPE html><html> <head> <title> new document </title> <meta charset="utf-8" /> </head> <body> <h1>使用AJAX技術實現“動態網頁面靜態化”</h1><select id="type"><option value="0">—請選擇產品類別—</option></select><select id="producer"><option value="0">—請選擇生產廠家—</option></select><script>var selectType = document.getElementById('type');var selectProducer = document.getElementById('producer');//頁面載入完成後發起非同步請求，擷取產品類別列表window.onload = function(){//1var xhr = new XMLHttpRequest();//2xhr.onreadystatechange = function(){if(xhr.readyState===4){if(xhr.status===200){doResponse(xhr.responseText);}else{console.log('失敗的響應');}}}//3xhr.open('GET','1-gettype.php', true);//4xhr.send(null);}function doResponse(txt){console.log('開始處理響應資料：');//console.log(typeof txt);//console.log(txt);//把伺服器端返回JSON字串解析為JS對象var obj = JSON.parse(txt);//console.log(typeof obj);console.log(obj);for(var i=0; i<obj.length; i++){var type = obj[i];selectType.innerHTML += '<option value="'+type.tno+'">'+type.tname+'</option>';}}selectType.onchange = function(){console.log('使用者的選項發生改變了：');var tno = this.value;console.log(tno);//發起非同步請求，根據tno擷取對應的廠家//1//2//3//4}</script> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
