1、初步了解
這里可以修改網絡快和慢。限網，流量式的，做模擬的。
network->all代表加載的所有事件
后面的那個顯示有/，這個是首路由。后面有很多svg和js等文件
想要這個服務器的地址，使用network->XHR 它是XMLHttpRequest 。
ajax封裝的就是這個XHR對象。這里就能看到這個對象
對象里有很多數據，沒必要去看原生js的這個方法
小**的接口：它調用的接口就是banner
點擊banner就可以看到服務器的接口，請求方式，狀態碼，遠程ip等等
下面是有響應頭和請求頭：
這里可以修改請求設備：
當點一下的時候又調用了很多接口，每個接口對應了很多數據。
我們把請求發出去了，然后看的是響應，響應的數據我們要進行渲染。響應的數據就是response ,preview是預渲染的視圖。
將cover添加https: 進行訪問，查看這個資源
就是它的一張圖片：
2、實際原理演示
添加回調函數
$(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>
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>
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工具設置一下格式
這是並發的兩次請求：
3、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>
現在需要把這些接口拿到，然后獲取接口下的數據：
現在審查元素，刷新一下，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>
$(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>
$(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>
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>
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>
$.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>
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>
$('#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>
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框架不是前后端分離的。它是后端寫的前端，直接用服務器渲染出來的。
4、最終代碼：
<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>