AJAX 網路連線實務 - Front End 網頁前端工程教學
Рет қаралды 22,418
Күн бұрын
@r124io2 2 ай бұрын
講解的很詳細 謝謝老師~
@cwpeng-course 2 ай бұрын
不客氣 :)
@AK-di6xs Жыл бұрын
感謝彭彭老師 現在終於知道AJAX和XHR是甚麼了 ---------- JavaScript AJAX .btn{ background-color: palegreen; padding: 8px;border-radius: 5px; cursor: pointer; } AJAX 連線取得資料 function getData(){ // 利用 fetch 進行連線並取得資料 fetch("cwpeng.github.io/live-records-samples/data/products.json").then(function(response){ return response.json(); }).then(function(data){ // 已經取得資料，把資料呈現到畫面上 let result=document.querySelector('#result'); result.innerHTML="" for (let i=0;i
@cwpeng-course 11 ай бұрын
讚讚，這是前端很重要的一個主題 :)
@AndreChen-q8v Жыл бұрын
謝謝老師的課程分享，總算是對AJAX有比較基礎的認知了!
@cwpeng-course 11 ай бұрын
太好了，很高興對你有幫助 :)
@shenxing9894 Жыл бұрын
老师讲课很能带动我的思路。学起来比起其他的教学视频好多了。感谢
@cwpeng-course Жыл бұрын
谢谢你的回馈，觉得很棒 :)
@linfrank8417 2 жыл бұрын
終於知道AJAX內容，和怎麼取用JSON資料的方法了
@cwpeng-course 2 жыл бұрын
讚讚，很高興對你有幫助 :)
@yuhantzeng 2 жыл бұрын
謝謝老師的教學，最近剛好想學fetch，老師講的很棒
@cwpeng-course 2 жыл бұрын
謝謝，希望對你有幫助 :)
@user-EricLin0619 2 жыл бұрын
請問老師，可以出一個整合前後端的系列嗎？希望有具體的專案實作可以練習看看，或是老師有推薦哪邊有資源可以參考嗎？最近快看完老師的flask教學，但不知道下一步該怎麼做？麻煩老師解惑，謝謝老師！
@cwpeng-course 2 жыл бұрын
感謝你的建議，我會考慮看看 ~ 專案實作的部份，試著模仿任何一個你喜歡的網站，做出它的主要功能就是很好的開始，例如會員登入系統 + 留言板，就是一個基本的社群系統，這樣的東西就可以自己試試看。
@user-EricLin0619 2 жыл бұрын
@@cwpeng-course 好的，感謝老師的回覆
@翁嘉偉-w4y Жыл бұрын
謝謝老師
@cwpeng-course 11 ай бұрын
不客氣哦 :)
@ace.1929 10 ай бұрын
老師您好 json格式的網址不能用了該怎麼辦呢
@cwpeng-course 10 ай бұрын
應該還是可以用的，建議仔細確認是否打錯，然後再試試看 ~
@estherlee7615 2 жыл бұрын
老師想請問一下，如果取用的是CSV資料，在轉成JSON格式那部出現錯誤還有什麼辦法可以處理嗎？
@cwpeng-course 2 жыл бұрын
CSV 的資料就先用純文字的方式取得，後續再自己使用字串分割的方法來做處理 ~
@fatblackcatslife.9970 2 жыл бұрын
讚!受益良多
@cwpeng-course 2 жыл бұрын
很高興對你有幫助！
@北科大-蘇詳崴 2 жыл бұрын
謝謝彭彭老師
@cwpeng-course 2 жыл бұрын
不客氣 ~
@meteorite94424284 Жыл бұрын
謝謝老師的解說 老師可以promise的教學 覺得那裏不太明白
@cwpeng-course Жыл бұрын
可以先參考我之前的直播，有談到這個主題： kzbin.info/www/bejne/hIDTo3ako897o5I
@kartg00525981 10 ай бұрын
老師我想請問20:45第26行程式碼 為什麼顯示出來的結果不是這樣呢 Pixel 7,17700,最新的 Pixel 手機。 Pixel 7,17700,最新的 Pixel 手機。 Chromecast,1500,在大螢幕上播放喜歡的影片。 Pixel 7,17700,最新的 Pixel 手機。 Pixel 7,17700,最新的 Pixel 手機。 Chromecast,1500,在大螢幕上播放喜歡的影片。 Pixel Book,12000,最新的 Chromebook 產品。 i=0的時候跑第一次迴圈 result.innerHTML有了第一筆資料 i=1的時候跑第二次 result.innerHTML+=第二筆資料 不是會把原本第一筆資料加上第二筆資料 變成這樣嗎 Pixel 7,17700,最新的 Pixel 手機。 Chromecast,1500,在大螢幕上播放喜歡的影片。 想不通
@cwpeng-course 10 ай бұрын
原本的第一筆資料加上第二筆資料，然後再覆蓋第一圈時的第一筆資料，所以第一筆資料不會重複顯示，以此類推。
@kartg00525981 10 ай бұрын
@@cwpeng-course 請問覆蓋第一圈的第一筆資料是哪個步驟
@cwpeng-course 10 ай бұрын
@@kartg00525981 result.innerHTML+=第二筆資料，就會把第一圈的第一筆資料覆蓋掉了 ~
@kartg00525981 10 ай бұрын
@@cwpeng-course 不好意思 我有點想不通 result.innerHTML+=第二筆資料 不是先把第一筆資料加上第二筆資料 然後再儲存到result.innerHTML嗎? 為何會覆蓋掉🤔
@kartg00525981 9 ай бұрын
@@cwpeng-course老師我想通了！ 但我花了兩週....才想通😢
@豆芽兔忍 Жыл бұрын
想請問一下,我直接在console列印product這個物件有跟教學的依樣一一打印出來, 但為什麼當我在product這樣時主畫面顯示的是[object Object][object Object][object Object], 只有product.name時才會顯示內容,在html中無法直接顯示物件成員嗎?
@cwpeng-course Жыл бұрын
JavaScript 會用自己的方式把物件轉換成字串顯示，如果要明確的處理，就必須寫個迴圈自己一個一個決定要怎麼顯示物件中的細節內容。
@蔡淑慧-w8y Жыл бұрын
彭彭老師您好 fetch是不是可以串接chrome的遠端server及近端server 比如我們可以在開發工具修改網頁可是重整就不行了
@cwpeng-course Жыл бұрын
fetch() 是用來串接 server 沒錯。重新整理就會重新到 server 抓取網頁，在開發人員工具中作的修改只是針對當下而已，沒有辦法保留。
@黃柏翔-e1v 2 жыл бұрын
老師 以前的XmlHttpRequest 會完全被這個取代嗎?
@cwpeng-course 2 жыл бұрын
新的寫法可以完全取代 XMLHttpRequest，現在來看確實會慢慢地取代沒錯。
@0xLitchi Жыл бұрын
如果不能抓取老師提供網址的，記得網址要打對。我原本也抓不了，結果發現http少打一個s
@cwpeng-course Жыл бұрын
細節真的很重要 XDDDD
@keysaepo9577 2 жыл бұрын
彭彭，在result.innerhtml=" "那里有个点不懂，如果清空的话，那么for循环里面的取得的资料不也会被清空么，整个网页应该是空白，为啥还会有一开始呈现的资料呢？
@asiaboy3289 2 жыл бұрын
先把innerHTML清空，再重新放進去，就不會有重複疊加的問題囉！ 但是資料還是會有的～因為是先清空，再放新的HTML！
@cwpeng-course 2 жыл бұрын
感謝 @Asia Boy 的說明 :)
@Tady_lin 2 жыл бұрын
👍👍👍
@cwpeng-course 2 жыл бұрын
👍👍👍
@jennifer56109 Жыл бұрын
想請問老師，為什麼後面的""不會被印出成的字串呢?
@cwpeng-course Жыл бұрын
被詮釋成 HTML 的介面來顯示了，不會真的把標籤文字展示出來。
@huanggg9497 2 жыл бұрын
看著老師打code總覺得非常合理,但是自己實際操作一次都卡卡的.
@cwpeng-course 2 жыл бұрын
這是很正常的現象哦，沒有真的自己練過試過，確實會很容易忽略細節 ~
@Turner-eu3yz Жыл бұрын
感謝老師的教學 ，但那個網址好像失效了，可以幫忙處理嗎?
@cwpeng-course Жыл бұрын
我測試了一下，應該還是活著的哦 ~
@justinwu483 Жыл бұрын
剛剛本來想幫忙貼網址上來但被吃掉了 另外想請問老師目前頻道上有後端的教學嗎 我只有找到flask
@cwpeng-course Жыл бұрын
是，目前後端的部份只有 Python Flask 系列的後端教學。
@user-EricLin0619 2 жыл бұрын
老師您好，我完全照著您的程式碼輸入但是一直得到這個error Uncaught (in promise) SyntaxError: Unexpected end of input 然後我在使用fetch的時候常常會出現 blocked by cors policy這個error 麻煩老師為我解惑，謝謝您!
@cwpeng-course 2 жыл бұрын
並不是所有網址都可以順利 fetch 的，會有所謂的 CORS 問題，你提到的 Blocked by CORS Policy 就是關於這點。影片中提供的網址你可以順利使用，就達成目標。未來這個操作主要是用在和自家的後端程式互動上。 若還是有其他問題，可能要把程式碼貼出來看看。
@user-EricLin0619 2 жыл бұрын
@@cwpeng-course 不過老師我自己弄的html檔也沒辦法fetch，請問這樣怎麼辦呢？
@cwpeng-course 2 жыл бұрын
@@user-EricLin0619 也很可能是 CORS 的問題，你要看的是瀏覽網頁時的網址，和你程式連線的網址，是不是相同的，如果不是相同的，通常就沒辦法使用。
@434c李元喬 2 жыл бұрын
為甚麼這裡不能直接innerHTML=data一條指令完成 而是要透過for阿
@cwpeng-course 2 жыл бұрын
data 是一個 JSON 格式的資料，如果你想要給使用者看原始的資料，那直接用 innerHTML 也沒有不行。如果是想給使用者看比較漂亮的呈現，就得把資料一個一個抓出來，再決定要如何呈現給使用者看。
@434c李元喬 2 жыл бұрын
@@cwpeng-course 謝謝老師
@姚字丞 2 жыл бұрын
@cwpeng-course 2 жыл бұрын
:)
@jinyuxing4841 Жыл бұрын
老師您好 我想詢問一下，我也有按照您的方式去操作，當我google chrome 開啟主控台的時候再點選，連線取得資料的按鈕 會出現index11.html:16 Uncaught (in promise) TypeError: Failed to fetch at getData (index11.html:16:9) at HTMLButtonElement.onclick (index11.html:10:34) 這樣的錯誤提示，但是我沒有先開主控台，就直接點選"連線取得資料"的按鈕，卻可以正常出現response 的效果，請問這是甚麼問題呢，請您協助QQ 謝謝您
@cwpeng-course Жыл бұрын
就你的描述我暫時無法判斷哦，可能把程式碼貼出來看看會比較清楚 ~
Marat Oralgazin
Рет қаралды 579 М.