jQuery初學基礎常用內容——AJAX
阿新 • • 發佈：2018-11-28
什麼是AJAX，我對於AJAX的理解就是，當你網頁中的某個功能，需要請求一條資料，在載入這個資料的時候（比如說顯示一個額外的小卡片欄，或者是載入某一塊的內容時），不用整個網頁都要重新載入，來獲取這個資料，這樣可以更加有效的節省資源，這種感覺就像是，選擇一家快遞，其中一個人選擇了一個小快遞公司，這個公司送快遞需要你自己去服務點拿快遞，而你選擇了大快遞公司，送貨上門，而且價錢都一樣或者更少。
load()方法
因為本人也是在自學中，對於很多知識的理解可能不是很透徹，所以我對load()方法的理解就是，從其他網頁載入當前網頁所需的內容。以下程式碼是我從視訊中學習的內容。
//html中相關程式碼 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <button id="trigger">協議</button> <div id="card" style="display: none"> </div> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="JS/main.js"></script> </body> </html>
var trigger = $('#trigger'); var card = $('#card'); var loaded = false; //定義一個loaded變數並賦值false，我的理解就是定義一個flag trigger.on('click',function () { //當用戶點選按鈕觸發事件 if(card.is(':visible'))//判斷id為card的div是否已經顯示 { card.slideUp();//如果id為card的div內容沒有顯示，那麼就顯示，否則執行以下程式碼 } else{ if(!loaded) //如果loaded沒有載入，就執行以下程式碼 { card.load('result.html');//id為card的div載入result.html中的內容 loaded = true;//並且讓loaded為true } card.slideDown();//如果已經載入過result.html中的內容，那麼就直接顯示，不在請求 } //toggle(); });