三級聯動及優化

時間 2019-11-10

標籤三級聯動優化简体版

原文原文鏈接

　　今天咱們經過 Memcache 優化三級聯動javascript

　　第一步 , 咱們須要創建一個數據庫 test , 數據庫中有一個表 region,php

　　第二步 , 寫代碼html

　　　下面數據庫請求的過程 index.phpjava

<?php
    // 數據庫鏈接
    $mysqli = new mysqli("127.0.0.1","root","","test");
    // 設置編碼方式
    $mysqli->set_charset("utf8");
    // 邏輯控制語句
    $pid = isset($_GET["pid"]) ? $_GET['pid'] : 0;
    // 實例化  Memcache優化
    $mem = new Memcache();
    $mem->connect("127.0.0.1",11211);
    $allarea = $mem->get("area_" .$pid);
    if (empty($allarea)) {
        // 查詢數據 
        $sql = "select * from region where pid=" . $pid;
        // 發送sql語句
        $result = mysqli_query($mysqli,$sql);
        // 處理查詢結果
        while($area = mysqli_fetch_assoc($result)){
            $allarea[] = $area;
        };
        // 將查詢到的數據放到memcache中
        $mem->set("area_".$pid,$allarea);
    }
    if ($pid) {
        exit(json_encode($allarea));
    }
    include("area.html");
?>

　　　　area.html 中的內容mysql

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三級聯動</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="choose">
        <label>省份</label>
        <select class="select" id="province" next-level="city">
            <option value="">請選擇</option>
            <?php foreach($allarea as $val) {?>
            <option value="<?php echo $val['id'] ?>"><?php echo $val['name']; ?></option>}
            <?php } ?>
        </select>
        <label>地市</label>
        <select class="select" id="city" next-level="area">
            <option value="">請選擇</option>
        </select>
        <label>區縣</label>
        <select id="area">
            <option value="">請選擇</option>
        </select>
    </div>
</body>
</html>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
    $(".select").change(function() {
        var nextlevel = $(this).attr("next-level");
        var val = $(this).val();
        if (val == "") {
            return false;
        }
        // 發起ajax請求
        $.ajax({
            url:"index.php", // 請求服務器的地址
            type:"get",    
            data:{pid:val},        // 提交的數據
            dataType:"JSON",     // 預期返回的數據格式
            success:function(res){ // 請求成功後的函數
                // console.log(res);
                // var optionhtml = '<option value="">請選擇</option>';
                var optionhtml = '';
                // 循環 each 
                $.each(res,function(key,val){
                    optionhtml += '<option value="'+val.id+'">'+val.name+'</option>'
                })
                
                // html 會覆蓋前面的內容
                // $(".select:eq(1)").html(optionhtml);

                //  append 追加 再追加以前先刪除除了第一個之外的前面的內容
                $("#" +nextlevel+ " option:not(:first)").remove();
                $("#" +nextlevel).append(optionhtml);
            }
        })
    });    
</script>

　　　　使用Memcache臨時性鍵值儲存,減輕了mysql數據庫的負擔,減小了ajax的請求,同時也要注意memcache與mqsql 之間並非對立的, 而是互補的關係.jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。