高階JavaScript #ES6(模板字串,let,箭頭函式,forof,引數增強,解構,class,promise)

阿新 • • 發佈：2020-12-11

//sanji.php

<?php
//連線資料庫
$conn = new mysqli('127.0.0.1','root','root','jingqu');

$sql = "select * from tplay_province";
$res = $conn->query($sql);
$list = $res->fetch_all(MYSQLI_ASSOC);


?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="sheng">
        <option value="">請選擇省</option>
        <?php
            foreach($list as $val){
                ?>
                <option value="<?php echo $val['provinceid']?>"><?php echo $val['province']?></option>
                <?php
            }
        
        ?>
    </select>
    <select name="" id="shi">
        <option value="">請選擇市</option>
    </select>
    <select name="" id="qu">
        <option value="">請選擇區</option>
    </select>
</body>
<script src="js/jquery-3.5.1.js"></script>
<script>
    $('#sheng').change(function(){
        var id = $(this).val();
        $.ajax({
            url:'sjld.php',
            data:{ids:id,type:1},
            type:'post',
            dataType:'json',
            success: function(res){
                // alert(res);
                // console.log(res.data);
                // alert(1);
                var htm = '<option value="">請選擇市</option>';

                // console.log()
                for(var i=0;i<res.data.length;i++){
                    // console.log(res.data[i].city);
                    htm += '<option value="'+res.data[i].cityid+'">'+res.data[i].city+'</option>';
                }
                $('#shi').html(htm);
                $('#qu').html('<option value="">請選擇區</option>');
            },
            error: function(xhr, status, error) {
                console.log(xhr);
                console.log(status);
                console.log(error);
                }
        })
    });
    $('#shi').change(function(){
        var id = $(this).val();
        $.ajax({
            url:'sjld.php',
            data:{ids:id,type:2},
            type:'post',
            dataType:'json',
            success:function(res){
                console.log(res);
                var htm = '<option value="">請選擇區</option>';
                for(var i=0;i<res.data.length;i++){
                    htm += '<option value="'+res.data[i].areaid+'">'+res.data[i].area+'</option>';
                }
                $('#qu').html(htm);
            }
        })
    })
</script>
</html>

//sjld.php

<?php
header("Content-Type: text/html; charset=utf-8");
//連線資料庫
$conn = new mysqli('127.0.0.1','root','root','jingqu');

$type = $_POST['type'];
$id = $_POST['ids'];
if($type == 1){
    $sql = "select * from tplay_city where fatherid = $id";
}else{
    $sql = "select * from tplay_area where fatherID = $id";
}

$res = $conn->query($sql);
$info = $res->fetch_all(MYSQLI_ASSOC);
$arr = [];
$arr['id'] = 1;
$arr['data'] = $info;
// var_dump($arr);

echo json_encode($arr);

?>