ajax使用案例

時間  2019-11-10
標籤 ajax 使用 案例 欄目 Ajax 简体版
原文   原文鏈接

 

 

 一、初步瞭解

這裏能夠修改網絡快和慢。限網，流量式的，作模擬的。javascript

network->all表明加載的全部事件html

後面的那個顯示有/，這個是首路由。後面有不少svg和js等文件前端

想要這個服務器的地址，使用network->XHR  它是XMLHttpRequest 。java

ajax封裝的就是這個XHR對象。這裏就能看到這個對象python

對象裏有不少數據，不必去看原生js的這個方法mysql

小**的接口：它調用的接口就是bannerjquery

點擊banner就能夠看到服務器的接口，請求方式，狀態碼，遠程ip等等程序員

下面是有響應頭和請求頭：ajax

這裏能夠修改請求設備：sql

當點一下的時候又調用了不少接口，每一個接口對應了不少數據。

咱們把請求發出去了，而後看的是響應，響應的數據咱們要進行渲染。響應的數據就是response ,preview是預渲染的視圖。

將cover添加https: 進行訪問，查看這個資源

就是它的一張圖片：

二、實際原理演示

 添加回調函數

        $(function () {
            
        })

獲取首頁數據，發送ajax請求。請求url，請求方式，成功以後的回調函數。

        $(function () {
            $.ajax({})
        })

而後填個人請求地址：

兩個之間逗號隔開

 $(function () {
            $.ajax({
                url:'https://api.apeland.cn/api/banner/',
                methods:'get',
                success:function () {
                    
                },
                error:function () {
                    
                }
            })
        })

再看下面代碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:'https://api.apeland.cn/api/banner/',
                methods:'get',
                success:function (res) {
                    console.log(res);
                },
                error:function (err) {
                    console.log(err); 
                }
            })
        })
    </script>
</body>
</html>

將咱們請求以後服務器迴應的數據打印出來，就是一個對象。

而後咱們能夠對這個服務器返回的數據進行解析，若是code是0，而後對data裏面的數據作啥操做。

這是一個數組，一個元素，直接取這一個數組元素

如今要獲取數組中的cover：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:'https://api.apeland.cn/api/banner/',
                methods:'get',
                success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
                        console.log(cover);
                    };

                },
                error:function (err) {
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>
View Code 
success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover; console.log(cover);
                    };

                },

而後須要建立一個img將這個圖片插入到個人頁面中。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">

    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                url:'https://api.apeland.cn/api/banner/',
                methods:'get',
                success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
                        console.log(cover);
                        $('#box').append(`<img src=${cover} alt=${name}>`)
                    };

                },
                error:function (err) {
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>
View Code 
  success:function (res) {
                    if(res.code===0){
                        var cover=res.data[0].cover;
　　　　　　　　　　　　　　　　var name=res.data[0].name;
　　　　　　　　　　　　　　　　console.log(cover); 
　　　　　　　　　　　　　　$('#box').append(`<img src=${cover} alt=${name}>`) //追加元素。追加標籤用反引號，標籤裏用服務器返回的數據，使用${}接收變量,${}不用引發來
　　　　　　　　　　　　}; },

這樣就出來了：

 

當我點擊python，這裏顯示Python的內容

當我點擊雲計算，這裏顯示的是雲計算的內容。一個路由的不一樣，改變了頁面的不一樣。

再好比看下面路飛網頁：

這個url，又叫接口：

當我點擊免費課的時候，能看到免費課的課程。一個url對應的接口不一樣，接口不一樣返回的數據不一樣，數據不一樣對應的頁面就不一樣。這叫作數據驅動視圖。數據變了，前端作了渲染，而後頁面就變了

再點擊輕客，url又變了，頁面也變了。

url在變，這個接口也在變，數據也在變

上圖和下圖那欄數據一致：

點擊運維獲取的是sub_categroy是0和2的數據，0是全部的數據，2是運維的接口數據

 

 

free_sections裏的屬性和頁面中顯示的一致：

開發工具獲取的數據以下：

頁面展現效果以下：

第一條數據展開以下；

雙擊這裏可跳轉到開發工具這個的全部數據的頁面：

能夠用json工具設置一下格式

這是併發的兩次請求：

三、ajax實際代碼實現

 這兩處應該都是有個div,div下有個ul

 

代碼：須要用ajax拿到接口數據放到嚮導裏面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {

        })
    </script>
</body>
</html>
View Code

如今須要把這些接口拿到，而後獲取接口下的數據：

如今審查元素，刷新一下，network->xhr->有個list

單擊查看到當前頁面的數據，python對應id1的數據，運維對應id2的數據。hide:false 表示這一項不隱藏，顯示出來的

 

後面頁面訪問這裏也有對應：

而後從headers裏複製出來這些數據的接口

 

將接口放到ajax的url屬性裏面。

接口數據也能夠直接用這個接口連接訪問，不用在開發工具中看。

 

谷歌有個格式化的插件，也能夠用網上的格式化一下方便閱讀；

複製過來格式化一下：這就是一個json文件

而後能夠複製過來，方便本身調用時查看：

將1處的接口2放到ajax的url裏面進行調用，在ajax裏面會請求這個接口並在succes的回調函數裏返回4處的數據賦值給存在的變量res。後面須要對服務器給咱們返回的數據進行操做，那麼咱們就取4中的數據用變量的形式放到ajax建立的html標籤中。這樣前端訪問到這個頁面時就要從後端獲取來的數據進行渲染的網頁了。然後端程序員就是負責提供前端程序員這些接口，供他們調用這些數據將前端網頁進行渲染的。

咱們能夠看到，4處返回的這些數據就是數據庫的數據。每一個{}裏面就是一行（條）數據，每行數據都有相應的字段。

 1處這張表和2處這張表是有關聯的，點擊1表的一行數據Python    2處顯示python相關的一張表的數據（個人理解是這裏1處的每一個li標籤數據對應一個表；也能夠是全部li標籤對應2處的1個表，可是這張表有1處每條數據的id做爲外鍵引入到這張表。這樣的話就是每次點擊1處表的某條數據內容，在2處對應這條數據id的2處表的內容在後端查詢出來並在下面這個ul中顯示。顯示是根據2處的數據條數用ajax等語言建立li標籤並變量代替生成相同格式的標籤。）。點1處的每條數據，2處都是在不停的切換的，這就是表與表之間的關聯。後臺須要作不少操做的。後端數據的讀取能夠用python的pymysql模塊。

下面寫代碼獲取接口數據：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        //         {
        //     "error_no": 0,
        //     "data": [{
        //         "id": 1,
        //         "name": "Python",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 2,
        //         "name": "Linux運維",
        //         "hide": false,
        //         "category": 4
        //     }, {
        //         "id": 4,
        //         "name": "Python進階",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 7,
        //         "name": "開發工具",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 9,
        //         "name": "Go語言",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 10,
        //         "name": "機器學習",
        //         "hide": false,
        //         "category": 3
        //     }, {
        //         "id": 11,
        //         "name": "技術生涯",
        //         "hide": false,
        //         "category": 1
        //     }]
        // }
        $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res);
                },
                error:function f1(err) {
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>
View Code 
        $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res);
                },
                error:function f1(err) {
                    console.log(err);
                }
            })
        })

$(function{

　　$.ajax({})

})

記得外面的$(function{})是加載完文檔才執行內部代碼，防止文檔沒加載完，js操做沒加載的標籤的事情。而想要實現ajax的請求是放在$.ajax({})裏面的。ajax是jQuery的方法，須要導入jQuery庫文件。剛纔犯了個錯誤，沒有放到$.ajax({})裏面。

下面就是代碼執行後獲取到的這個api的數據對象。

對象裏有返回錯誤碼，數據內容是個數組（循環數組內容可用foreach方法），對象的方法。

獲取到的數據內容就是這個接口提供的數據內容：

每條數據內容也就是訪問的那個接口的數據內容。

而後獲取res對象裏的data，

        $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res.data);
                },
                error:function f1(err) {
                    console.log(err);
                }
            })
        })

它是個數組，想要循環操做每一個元素能夠用 數組方法

數組對象.forEach(function (item,index) {
    
}  //item是每一個對象，index是這個每一個對象的索引

我點擊開發者工具它是怎麼知道顯示工具裏面的內容，須要知道你點擊的是哪一個id的數據，而後根據開發者工具這條數據的表id來進行兩表之間的查詢的。因此插入的li標籤好比開發者工具，要將這個api返回的數據中的id數做爲開發者工具這個li的一個屬性記錄下來。點擊事件反生時就根據獲取到的id屬性值，來顯示另外一個表中相同這個外鍵id的數據表內容。

 

所以，須要將1處的每條數據的id放到生成的li標籤屬性內。而顯示的內容經過接口返回的數據可知是name。

 

生成每條數據要追加到模板html中的指定標籤顯示。如下總結代碼在以下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        //         {
        //     "error_no": 0,
        //     "data": [{
        //         "id": 1,
        //         "name": "Python",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 2,
        //         "name": "Linux運維",
        //         "hide": false,
        //         "category": 4
        //     }, {
        //         "id": 4,
        //         "name": "Python進階",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 7,
        //         "name": "開發工具",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 9,
        //         "name": "Go語言",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 10,
        //         "name": "機器學習",
        //         "hide": false,
        //         "category": 3
        //     }, {
        //         "id": 11,
        //         "name": "技術生涯",
        //         "hide": false,
        //         "category": 1
        //     }]
        // }
        $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li id=${item.id}>${item.name}</li>`).appendTo('#box ul')
                        })
                    }
                },
                error:function f1(err) {
                    // console.log(err);
                }
            })
        })
    </script>
</body>
</html>
View Code 
 $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li id=${item.id}>${item.name}</li>`).appendTo('#box ul') })
                    }
                },
                error:function f1(err) {
                    // console.log(err);
                }
            })
        })

這裏使用的方法以下：

 $(`<li id=${item.id}>${item.name}</li>`).appendTo('#box ul')

子.appendTo(父) ；子是jq對象，是生成的li標籤，是反引號引發來的；獲取後臺的數據是每條數據.字段 ；變量數據引入是${後臺數據變量} ；父是引號括起來的選擇器。 

全部數據是res返回數據中的data，res.data獲取；對象獲取其中的屬性值，因爲不是方法，無需加（），直接對象.屬性,屬性能夠是不少類型的數據，而不僅是數字字符串，也能夠是數組，對象等；

這裏data是數組，res.data是數組，數組循環每一個元素能夠是數組.forEach() 。forEach方法中是匿名函數forEach(function(item,index){}),匿名函數兩個參數，item是數組每一個元素，index是這個元素的索引，函數中對單個數組元素寫代碼作操做就是對全部數組元素作相同的操做；這裏作的是對每一個元素作添加li標籤並追加到id是box下的ul中，顯示返回數據中全部的name並記錄是哪條數據的（經過id區分）。

 獲取到的每條數據是item,每一個item是個對象，獲取這條數據中的值是，這條數據對象.屬性 。這裏是item.name

我點擊一下python出現一個sub_category是1，點擊一下運維出現一個sub_category是2。點擊右下角首頁中得到的  字段是用來拼接用的，爲何不一致就不得而知了。好像是category是父，拼接那裏是sub_category是子的值

這裏就是拼接用的，後臺獲取到的字段category就是是拼接用的值。

 id屬性值賦予也能夠單獨用attr來設置。 //疑問attr能夠連着用麼，一行代碼連着設置多個屬性？

注意這裏，在反引號裏面須要${變量}引用，在外面彷佛是不須要的，這裏在外面是加了${}報錯語法問題。在反引號外面這個變量不加${}纔是對的。//疑問，${}引用變量只是反引號中引的嗎？

後面再使用attr添加屬性也是能夠的。

看下面：

獲取到的這裏缺乏一個所有，那麼用ajax直接給獲取到的數組裏面添加一個對象數據，id爲0，name爲所有。由於這裏建立的li標籤我只用了id和name變量，因此只要有這兩個變量就好。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        //         {
        //     "error_no": 0,
        //     "data": [{
        //         "id": 1,
        //         "name": "Python",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 2,
        //         "name": "Linux運維",
        //         "hide": false,
        //         "category": 4
        //     }, {
        //         "id": 4,
        //         "name": "Python進階",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 7,
        //         "name": "開發工具",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 9,
        //         "name": "Go語言",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 10,
        //         "name": "機器學習",
        //         "hide": false,
        //         "category": 3
        //     }, {
        //         "id": 11,
        //         "name": "技術生涯",
        //         "hide": false,
        //         "category": 1
        //     }]
        // }
        $(function () {
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:0,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                    // console.log(err);
                }
            })
        })
    </script>
</body>
</html>
View Code 
               res.data.unshift({
                        id:0,
                        name:'所有'
                    })

是這個0嗎？

 

既然已經獲取到了1處的數據並顯示出來了，那麼須要獲取2處的數據並顯示出來。這樣的話能夠再寫一個ajax請求，1,2處的api是不一樣的。

獲取2處的數據寫第二個ajax請求。這個api下面的4，

請求得到的數據是所有的：

api中的sub_category=0中的這個0是須要拼接的。那麼要在全局var定義一個sub_category，讓它默認是0，就是顯示下面的所有。再將全局的這個sub_category賦值給所有的id。這樣就能顯示出所有的下面的內容。

而後將第二個ajax的請求api使用拼接的url，由於拼接用了變量，‘’變成反引號。

這裏sub_category是0.獲取到所有內容。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        //         {
        //     "error_no": 0,
        //     "data": [{
        //         "id": 1,
        //         "name": "Python",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 2,
        //         "name": "Linux運維",
        //         "hide": false,
        //         "category": 4
        //     }, {
        //         "id": 4,
        //         "name": "Python進階",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 7,
        //         "name": "開發工具",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 9,
        //         "name": "Go語言",
        //         "hide": false,
        //         "category": 1
        //     }, {
        //         "id": 10,
        //         "name": "機器學習",
        //         "hide": false,
        //         "category": 3
        //     }, {
        //         "id": 11,
        //         "name": "技術生涯",
        //         "hide": false,
        //         "category": 1
        //     }]
        // }
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                    // console.log(err);
                }
            })
            $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                }
            })
        })
    </script>
</body>
</html>
View Code

 

21條數據就是下面所有的數據。

那麼如今是點python，下面就顯示python的，點運維下面就顯示運維的。既然要顯示，下面是有個div的，div裏面有個ul，ul下有存放多個python或運維等的相關內容的li。

 如今以標題爲例，只寫這個標題

只看第一條數據：紅框裏1就是表的一條記錄。這個表又關聯了一張表   2能看出來

下面紅框就是又關聯的另外一張表：

關聯的另外一張表是在也面這裏進行展現的：

注意res返回的數據中有data屬性和data方法，咱們使用數據用的是data屬性,直接res.data就表明了數據，不加括號。這裏的res.data是個數組，循環數組元素要res.data.forEach(function(item,index){})

 而後要作的是生成子追加到父；子是生成子標籤，子標籤要用到反引號，子中要用到變量使用${}，子中能夠插入兩層子；父只是寫選擇器，不寫對象；每一個數組元素使用變量，item每一個數組元素對象，取裏面的屬性值就item.屬性。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <div class="content">
        <ul>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                }
            })
            $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
        })
    </script>
</body>
</html>
View Code 
$.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul') })
                    }
                }
            })

結果：

注意：是if(res.錯誤_no===0)，不要總寫成錯誤碼。

如今顯示的是所有的，想要的是點擊python，只顯示Python的，把其它的都排除掉了；點擊運維，只顯示運維的，把其它的都排除掉了，這個須要後端去過濾。那麼須要給這裏的每一個li標籤綁定一個click事件。

         $('#box ul li').click(function () {
                
            })

點擊事件作的就是每次執行改變sub_category=${sub_category}這個值

寫點擊事件，就是在函數做用域裏獲取點擊對象的id，而後將id賦值給sub_category變量，這樣請求的url即改變了。可是這樣的話前面的代碼在後面又要寫一遍。

那麼就把前面的代碼寫成函數，進行調用。而後後面點擊事件，先修改sub_category爲點擊標籤的id屬性值，而後再調用函數，作一樣的步驟顯示數據。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <div class="content">
        <ul>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                }
            })
            getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
            }

            $('#box ul li').click(function () {
                sub_category=$(this).attr('id')
                getCourseList(sub_category)
            })
        })
    </script>
</body>
</html>
View Code 
 getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
           }

           $('#box ul li').click(function () {
                sub_category=$(this).attr('id')
                getCourseList(sub_category)
            })
        })

可是沒有生效，點擊python以後下面的數據仍是沒有發生改變。由於建立li標籤尚未從後端拿到數據建立出來，下面的點擊事件就已經生成了。因此至關於沒綁定。本身作不了的事情，交給其它人去作，事件委託，事件代理。事件具備傳播性，點擊的是li標籤，它往父集上去傳播，還能往父的父傳播等等。既然這樣，就不給li綁定事件了。往父ul上綁定事件。

 

點擊以後已經添加了，在原來的基礎上追加的，那麼須要先清空再建立li標籤

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <div class="content">
        <ul>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                }
            })
            getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
            }

            $('#box ul ').on('click','li',function () {
                var sub_category=$(this).attr('id')
                console.log(sub_category);
                getCourseList(sub_category)
            })
        })
    </script>
</body>
</html>
View Code 
      $('#box ul ').on('click','li',function () {
                sub_category=$(this).attr('id')
                console.log(sub_category);
                getCourseList(sub_category)
            })

上面的那個錯了。   $(父選擇器).on(‘事件’，‘標籤’，匿名函數)  //錯選擇的是li而不是ul標籤。

代碼以下；

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <div class="content">
        <ul>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                }
            })
            getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        $('.content ul').empty()
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
            }

            $('#box ul ').on('click','li',function () {
                sub_category=$(this).attr('id')
                console.log(sub_category);
                getCourseList(sub_category)
            })
        })
    </script>
</body>
</html>
View Code 
   getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        $('.content ul').empty() res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
            }

            $('#box ul ').on('click','li',function () {
                sub_category=$(this).attr('id')
                console.log(sub_category);
                getCourseList(sub_category)
            })

這就是ajax，這就是前端工程師的工做。他們大部分都是寫頁面，作兼容，作移動端，pc端。再一個就是交互。後端寫出地址欄這種接口以後，前端就拿ajax去請求你的接口，而後進行dom操做。

dom操做就是對屬性，對值，對類等作的操做

好比這裏，點擊以後只有這一個變了顏色，就要用到那個兄弟選擇器，排他思想的作法

作先後端分離的，必定須要ajax去寫的，前端專門寫ajax，後端專門寫接口。djonge框架不是先後端分離的。它是後端寫的前端，直接用服務器渲染出來的。

四、最終代碼：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>魔降風雲變</title>
</head>
<body>
    <div id="box">
        <ul>
            <!--嚮導-->
        </ul>
    </div>
    <div class="content">
        <ul>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            var sub_category=0
            $.ajax({
                url:'https://www.luffycity.com/api/v1/course_sub/category/list/',
                methods:'get',
                success:function(res){
                    res.data.unshift({
                        id:sub_category,
                        name:'所有'
                    })
                    if(res.error_no===0){
                        res.data.forEach(function (item,index) {
                            $(`<li >${item.name}</li>`).appendTo('#box ul').attr('id',item.id)
                        })
                    }
                },
                error:function f1(err) {
                }
            })
            getCourseList(sub_category )
            function getCourseList(sub_category){
                $.ajax({
                url:`https://www.luffycity.com/api/v1/courses/?sub_category=${sub_category}&ordering=`,
                methods:'get',
                success:function (res) {
                    console.log(res);
                    if(res.error_no===0){
                        $('.content ul').empty()
                        res.data.forEach(function (item,index) {
                            $(`<li><h6>${item.name}</h6></li>`).appendTo('.content ul')
                        })
                    }
                }
            })
            }

            $('#box ul ').on('click','li',function () {
                sub_category=$(this).attr('id')
                getCourseList(sub_category)
            })
        })
    </script>
</body>
</html>
View Code
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程