ajax實現三級連動寫法的實例分析-js教程-PHP中文網

首頁

web前端

js教程

ajax實現三級連動寫法的實例分析

黄舟

Oct 30, 2017 am 10:36 AM

ajax 寫法聯動

主頁面代碼

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../wenjian/jquery-2.2.3.min.js"></script></head><body><select id="sheng">
    <option>请选择</option></select><select id="shi">
    <option >请选择</option></select><select id="qu">
    <option >请选择</option></select></body></html><script>
    $.ajax({
        data: {parent_id: 0}, //发送的数据        
        dataType: "json", //返回值的类型 text为string型        
        type: &#39;post&#39;,   //发送请求的方法(get)        
        url: &#39;sheng_l.php&#39;,//发送请求的地址        
        success: function (data) {//发送成功时的回调函数
    //            console.log(data);
            for (var i in data) {
                $("#sheng").append("<option value=&#39;"+ data[i][2] +"&#39;>" + data[i][1]  +"</option>")
            }
        }
    })
    $(document).ready(function () {
        $("#sheng").change(function () {
            $("#shi").get(0).options.length= 1;//            
            $("#qu").get(0).options.length= 1;
            var data = $("#sheng").find("option:selected").val();
            $.ajax({
                data:{parent_id:data},
                type:"post",
                dataType:"json",
                url:"sheng_l.php",
                success:function (data) {                    
                for(var i in data){
                        $("#shi").append("<option value=&#39;" + data[i][2] +"&#39;>" + data[i][1] +"</option>")
                    }
                }
            })
        })
    })
    $(document).ready(function () {
        $("#shi").change(function () {
            $("#qu").get(0).options.length= 1;            
            var data = $("#shi").find("option:selected").val();
            $.ajax({
                data:{parent_id:data},
                type:"post",
                dataType:"json",
                url:"sheng_l.php",
                success:function (data) {                    for (var i in data){
                        $("#qu").append("<option value=&#39;" +data[i][2] +"&#39;>" +data[i][1] +"</option>")
                    }
                }
            })
        })
    })

登入後複製

處理頁面代碼

<?php/**
 * Created by fcc
 * User: Administrator
 * Date: 2017/10/29
 * Time: 20:56 */require_once "../wenjian/DBDA.class.php";$db = new DBDA();
 $sql = "select * from region WHERE father_id = {$_POST[&#39;parent_id&#39;]}";$result = $db->Query($sql);echo json_encode($result);

登入後複製

以上是ajax實現三級連動寫法的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7779

Java教學

1644

CakePHP 教程

1399

Laravel 教程

1296

PHP教程

1234

Related knowledge

旅程IPx經典動畫《西遊記》西行旅程無畏無懼 Jun 10, 2024 pm 06:15 PM

穿越蒼茫征途，踏足西遊之境！今日，征途IP正式宣布將與央視動畫《西遊記》展開跨界合作，共同打造一場融合了傳統與創新的文化盛宴！此次攜手，不僅標誌著兩大國產經典品牌的深度合作，更彰顯了征途系列在弘揚中國傳統文化道路上的不懈努力與堅持。征途系列自誕生以來，便憑藉其深厚的文化底蘊和多元化的遊戲玩法，受到玩家們的喜愛。在文化傳承方面，征途系列更是始終保持著對中國傳統文化的敬意與熱愛，將傳統文化元素巧妙地融入遊戲，為玩家們帶來了更多的樂趣與啟發。而央視動畫《西遊記》則是陪伴了一代又一代人成長的經典之作，其

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

炸雞大業，不容差池！《逆水寒》聯動肯德基福上天，玩家社死'聞雞起舞” Apr 17, 2024 pm 06:34 PM

日期，《逆水寒》官宣將於4月19號-5月12號與肯德基展開聯動，但聯動的具體內容卻讓許多人蚌埠住了，連番直說「民上天了」、「要社死了」！原因就出在這次主題活動的口號上，曾經見識過《原神》《崩鐵》肯德基聯動的小伙伴肯定有印象，什麼“異世相遇、盡享美味”，到了《逆水寒》這裡就成了：對店員喊出「神候府查案，爾等何人?」店員需回答「炸雞大業，不容差池!」對員工的訓練指南：絕對不能笑！不只這個，這次聯動還辦起了舞蹈大賽，到主題店做出「聞『基』起舞」舞蹈動作，還能獲得一個搖搖樂小立牌。民，太民了！但就是要這

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：