[Powered by Google Translate] [研討會：JQUERY]
[VIPUL謝卡瓦特，哈佛大學]
[這是CS50。] [CS50.TV]
如果你在家，你可以在線訪問我的幻燈片
通過此鏈接。
這是的TjjRWj，在bit.ly.上
你也可以直接去到URL，
這是cloud.cs50.net /〜vshekhawat的，這是我的名字，
和jQuery。
我強烈鼓勵你跟隨，如果你在家裡看，
如果你在這裡，還因為這是一個漂亮的互動演示。
>> 所以，今天我將要談論的jQuery，第一個問題是，
jQuery的是什麼？
這一年，我知道你們有沒有覆蓋的JavaScript
在盡可能多的細節，正如我們在過去幾年。
JavaScript是，首先，只是一個客戶端語言
您使用每個用戶的機器上運行腳本和代碼。
因此，你有一台服務器，提供網頁的人，
但你可能要在他們的機器上做的東西，
問他們的機器將請求發送到您的服務器每隔30秒或類似的東西。
做到這一點，您可以使用JavaScript。
jQuery只是提供了更多的功能之上的JavaScript
為你做一些額外的東西。
如果你看的內容之上，
介紹了一些的東西，你是能夠做到的。
所以，總體來說，它創建於2006年1月。
它的最初設想是在2005年8月。
這是幾年，它是真正的新的Web 2.0運動的一部分
這使得互聯網如此閃亮。
這是使用最廣泛的Ja​​vaScript庫。
超過19.6萬個網站正在使用它，和使用仍在增加
根據到builtwith.com，其中，很顯然，在過去的一年中，
剛剛被不斷增加的相當線性。
其中排名前10萬的網站，還是有 -
其中約40％目前正在使用它。
Facebook的使用，目前大量的其他網站使用它。
你可以看一下那些在自己的統計，如果你想。
你可以告訴它是合法的，因為它有一個基礎和13名董事會成員，
隨著一隊20人的定期工作。
因此，它的使用非常廣泛，它有一個組織網址，它的花哨，
它具有分拆其他的東西，所以這是一個大問題。
>> 你為什麼要使用它呢？ jQuery是非常輕巧。
這意味著它不是一個巨大的文件。您可以下載
壓縮後的文件，這是沒有空白和註釋，這是只有32 KB。
所以很容易只是折騰到您的網頁
剛剛開始使用它。
這也是寫得非常有效，所以它不會佔用很多 -
它不會減慢你的網站多，當你使用它。
它可以讓你實現這在以前是不可行的事情。
還有一些方面的功能，
像創建動畫，通常將是非常，非常難以做到。
但在jQuery中，他們其實很簡單。
也有一些事情是惱人做的，
在JavaScript中，可能像發送POST請求，
但發送請求到服務器，你必須寫
五，六，七行代碼。
現在你可以做一個單一的代碼行，在一個單一的函數調用。
這確實簡化了很多的東西，你這樣做。
所有時尚的年輕人正在使用它。 ，我的意思是我。
在我最後的項目，這是去年news.whrb.org
這是電台，我創建了這個博客
它承載了我們所做的所有的節目和MP3文件。
您可以瀏覽過往，
這一切都做使用jQuery。你可以告訴
由於所有這些動畫，基本上。
所以如果你有 - 如果你創建一個新的職位，
你看到這些小slideDowns使用jQuery，一切都做。
這個褪色效果 - 所以那種東西是所有使用jQuery，
你不必不斷刷新頁面來瀏覽網站。
使用jQuery的另一個很酷的事情是這樣的演示文稿。
我使用這個開源的事情稱為scrolldeck的，
有人寫jQuery的頂部。
如果你真的看看源代碼，你可以看到，
他們使用的是美元符號美元符號
使用jQuery來表示一個函數是一個jQuery功能。
因此，他們的jQuery上定義一個包裝
允許你這樣做一個介紹，
你可以看到，在這裡，他們包括原來的jQuery文件，
這是什麼你就必須包括如果想使用jQuery
在您自己的網站。
>> 在談到上，你怎麼安裝呢？
你可以去jQuery.com和下載文件，
它添加到Web目錄，包括它。
因此，只要在上面，在你的HTML文件的頭部標籤
你的主要的HTML文件，就是有行代碼
您使用的是哪個版本的jQuery正確的版本。
您可以下載它通過去jQuery.com，
點擊“下載jQuery的，”你已經有了。就是這樣。
而實際上，我們可以一起來看看它是什麼樣子。
如果您點擊這裡下載，jQuery是這一點。
它只是一個大的JavaScript文件，它為你的所有魔法的東西。
這是縮小的版本，這是無法讀取。
您還可以在開發版本，這是可讀
但還是非常非常漫長的。
這是一個很大的東西在裡面。
您還可以鏈接到谷歌的託管版本。
所以這會允許你僅僅依靠谷歌提供。
他們提供的每一個版本，它在任何時候都可用。
所以，你或許可以依靠谷歌為你主持。
或者你可以連結到jQuery的自己的最新版本。
他們有一個網址，總是更新到最新版本。
這是jQuery的最新，並與有一個問題，
這是，如果更新的jQuery和一些先前的功能
他們變得退或過時，
它可能不是 - 它可能會開始沒有得到支持了。
所以，如果你寫一個網站使用1.8.2版本，
時間版本2.7出來
你寫的一些功能不工作了。
因此，最好只下載32 KB的文件，
把它放在你的網頁，它會永遠工作。
>> 我要繼續前進，並開始談論jQuery的實際功能。
的第一件事就是選擇器。這是什麼jQuery提供最初設想。
你也可以點擊文檔看
選擇我將要覆蓋的詳細文檔。
選擇器背後的想法是，你可以選擇HTML頁面上的元素。
頁面上元素的ID和類和其他識別方面。
還有 - 他們在不同的訂單。
有些的時候，他們互相嵌套。
jQuery允許您構建簡單的查詢，檢索頁面中的元素。
然後，你可以操縱這些元素使用jQuery功能，
這是操縱部分，我們稍後會得到。
您可以更改，更改CSS的HTML，
你也可以動畫和添加功能激活某些事件。
因此，舉例來說，如果點擊的東西，你想要的東西發生，
你可以做到這一點，以及使用jQuery。
有數量龐大的方式來選擇元素。
他們中的大多數，我從來沒有使用，但也有基本的，
這是非常重要的。
元素選擇，例如，如果你只是選擇什麼
這是一個div - 其實我有這個幻燈片演示代碼開放。
因此，舉例來說，在這裡的第一張幻燈片。
在這裡，我們有一個div。如果我們實際上在頁面上，選擇所有的div
它只是給我們所有的div，在這個文件中，存在一個數組。
ID選擇器可讓您選擇任何一個給定的ID。
所以，如果，例如，這件事情有ID為“什麼，”
如果我們這樣做的＃什麼，而不是一些ID，
話，就返回一個數組，它有一個單一的元素，也就是該元素的頁面。
我們也可以結合選擇這種方式有
只能選擇東西的div的ID。
所以，是的。只有選擇具有該ID的div的。
對於類，你只需要使用一個圓點，這是同樣的事情，CSS。
後裔也工作，所以如果你有一些類
嵌套內的元素 - 例如，
有一些類，它有一個錨標記，鏈接到另一個頁面，
你可以使用這個語法檢索鏈接。
您也可以一次選擇多個事物，只是用逗號將它們分開，
使用任何你想要的選擇，你會選擇他們一次，在一個單一的陣列。
再有就是也沒有選擇，所以你可以選擇所有的div
不具有某些特定的類。
而這僅僅是一個有用的方法來介紹，本次評選是如何工作的。
我將展示一些具體的例子，在第二。
>> 高級選擇 - 這些只是幾個例子。
這些有幾十個，但如果你要選擇所有的圖像標籤
在某些元素，那麼你只是做圖像。
如果你想選擇的偶數的元素，例如，如果有20個，其中，
你要選擇0，2，4，6等，
你要做的：就算了，或者你也可以這樣做：奇數。
這些偽選擇，這意味著他們實際上計算
所有其他元素，而不僅僅是選擇所有這些。
您也可以 - 每個元素也可以有特定的屬性。
因此，舉例來說，類=中心也是一個屬性。
這個錨標記，HREF，超文本引用，是一個屬性也。
因此，您可以選擇鏈接到特定的網頁或只是 - 這是真的一般的東西。
您可以選擇任何你喜歡的任何屬性。
然後，屬性，也包含。
如果，例如，要選擇所有的輸入元素
有“通”字，它們的名稱，
如果網頁上有一個輸入文本塊
這就是所謂的“密碼”，那是一種方式，你可以選擇。
有很多種。你可以去看看文檔
看到它是如何工作的具體例子。
>> 接下來的事情就是DOM操作。
我們選擇的元素之後，我們將要與他們實際做的東西。
到目前為止，我們還沒有在看著，但如果你看一下文檔，
真的有很多，我們可以做。
在這一點上，我們要在這個演示中選擇元素
並操縱他們使用jQuery。
因為這是使用jQuery實現，我們有jQuery庫的訪問，
我們可以使用這些功能在這個代碼。
一個有用的東西，你可能不知道的是控制台。
和谷歌Chrome是我使用的是什麼。您可以按ALT指令J
或ALT控制J來打開控制台。
在Firefox中，我認為它的位移K命令或控制移位K.
在Safari中，你必須去改變一些設置。
有一個鏈接，如果你想做到這一點，但我建議讓瀏覽器或Firefox。
所以，讓我們打開控制台，它在這裡。
它基本上只是讓你做任何你想要的。
所以，你可以只需鍵入創建了一個變量x，
X = 5，讓我們來看看X + 2。
你甚至可以做一些像CS +讓我們來看看，X + 45，那將是CS50。
你可以做一些典型的JavaScript的東西。
但你也可以這樣寫：jQuery在這裡。
>> 因此，讓我們來看看這第一方面。
我們要創建一個變量稱為HTML，它是一個字符串。
它有一個段落標記，這就是所謂的一些新的文本。
所以我們有這樣的HTML，它的一些新的文字，段落標記。
現在，我們其實是想將它添加到頁面中。
我將它設置的HTML這一段，在這裡，這個稱號是追加ID。
如果我們選擇追加ID，然後追加到
我剛剛創建的HTML變量，
它會增加，HTML結束時，右後這個段落標記。
因此，如果我們做到這一點 - 我們選擇這一段，
我們所謂的附加功能與HTML的變量，我只是說，
它會添加新的文本頁面上。
我們也可以預先準備，這意味著它會去之前，該元素的開始。
因此，有一些新的文本在開始和之後。
我可以繼續前進，刷新擺脫我剛剛做過這方面的東西。
但是，這是一個例子，你可以使用前置和追加方法
操作頁面上的東西，添加一些HTML。
>> 您還可以更改類。
在這種風格的文件，我創建了這個勝利類
有文本顏色為紅色，有些背景顏色，文字陰影。
它看起來可怕的，但是實際上，我可以 -
本段對應的類ID。
所以，我可以添加類為贏。
我可以在控制台中執行此，
將增加類，現在它看起來猙獰，不如預期。
CSS自動被應用到你的類 -
如果有CSS的一類，它會自動被應用
如果你改變一個元素的類。
然後我們可以使用刪除類只是將其刪除。
因此，如果你有一些預定義的類，如紅色或突出，
然後你想運用這些元素，
你不必做所有的CSS樣式每次。
你可以添加類元素，然後它會自動成為 -
它會自動尋找適合這一類。
我們也可以刪除的東西，所以我會選擇所有的div
在頁面上，並刪除它們。
那是什麼將會是什麼樣呢？
它要看起來像什麼，所以，實際上什麼也沒有留下。
我的演講了。
我可以刷新，並把它帶回來，幸運的是，
因為它只是運行一次，
但這是一個去除的例子，如果你想徹底摧毀關閉頁面元素。
>> 您也可以覆蓋了，我要選擇頁面上的所有的段落標記
和裡面去，取代他們在他們有任何文字
只用單詞“測試”。
如果你這樣做，你會替換頁面上的每一個段落，這個測試。
沒錯。他們全部換成測試。
所以這就是一個例子訪問文字和覆蓋的。
您還可以獲取信息，這是真的很酷輸入框。
如果你有一個輸入框，人們打字的東西到，
人們鍵入的東西進去，
在這裡，我們選擇的輸入，任何一種類型的文本輸入標籤。
在這種情況下，只有一個輸入框整個演示文稿，
所以我們就選擇了第一個，然後我們就可以調用Val函數。
返回值，輸入框，
值是剛剛發生的一切是在它裡面。
因此，如果我們做到這一點，只是返回字符串的東西。
而如果我們再次調用它寫更多的東西後，它變成更多的東西。
這是一個偉大的方式來訪問一個輸入框的元素，然後檢查，
這是一個有效的電子郵件地址，這是一個有效的日期，例如。
您可以立即檢索的東西，因為人們打字，
然後檢查其是否有效，將其發送回服務器，你想用它做任何事情。
這就是你如何訪問這些箱子裡面有什麼。
>> 您也可以直接修改CSS，而不是增加
一類，有一些預定義的屬性，
你可以添加任何CSS，你要到什麼。
因此，讓我們選擇的身體，這是整個演示文稿，
顏色的屬性，定義的文字是什麼顏色。
如果我們把它改成紅色，所有頁面中的文字會變成紅色。
我們可以做一些像背景顏色為藍色，
我們去它的美麗。
你可以做任何你想要的與此。
使用CSS屬性，你真的可以修改，在任何時候任何事情看起來如何。
接下來的事情就是效果。
修改CSS效果基本上是相同的事情，
但是，實際上他們提供一些額外的動畫。
因此，而不是只是顯示或隱藏著什麼或改變顏色，
你實際上可以使動畫。
這裡的文件，如果你想看一看它的廣泛文檔。
但我要說的是，主要的。
有顯示和隱藏屬性。
顯示/隱藏ID的對應這整個框，
所以如果我隱藏它，它就會消失。
我可以再次顯示它，如果我要讓它回來。
它的背上。它其實並沒有消失，
我其實沒有刪除它，我只是從頁面設置的CSS屬性的知名度隱藏
所以你看不到它了。
還有向上滑動和向下滑動，可以讓你有這樣的效果。
滑動消失，消失後
你可以將其向下滑動，使其回來。現在它回來了。
還有這種淡入淡出效果， - 褪色ID的對應這個盒子。
如果我消失了，然後它會慢慢消失。
我也淡出，它會回來的。
你也可以做淡入淡出，這是特定的淡入淡出功能。
你可以把它褪色，你想要的任何具體的不透明度。
所以，如果你慢慢淡出.5，它會成為半可見。
我可以使它.1回1使它再次完全可見。
那只是另一個動畫，你可以做。
>> 也有切換的效果。
所以我要選擇切換的ID，這相當於這個盒子，
該div，你可以調用切換，如果它是可見的，它會成為無形，
如果它是無形的，它會再次成為可見。
所以，我只是叫這個切換功能兩次，第一次是
隱藏同樣的事情，第二次調用表演同樣的事情。
你也可以做到這一點使用淡入淡出切換，
做同樣的事情，但它實際上變淡。
而同樣的事情幻燈片切換。
有連鎖效應，這意味著
如果你選擇一個元素，它只是調用了一堆動畫的方法，
如果你想淡出，然後向下滑動，
然後隱藏，然後淡入，它會做他們在一排。
所以消失了，回來 - 由於某種原因，隱藏並沒有發生。
讓我們試試吧。呀，所以它淡出，然後它溜去。
而且還有很多。您可以使用animate函數
創建自己的動畫，這是相當複雜的，
但它為您提供了無限的可擴展性。
你可以讓你想要什麼樣的動畫。
您還可以使用隊列排隊多個動畫的時間。
所以，如果你想要的東西飛跨頁，
從右上方向左下方滑動，你可以做到這一點，
只是有一堆要一前一後的動作。
>> 接下來的事情，我們要談的是事件。
活動讓您 - 到目前為止，我們剛剛一直在打字的東西到控制台
那就是要做到這一點的方法之一，
但實際頁面上，你不會能夠
使用戶類的東西到控制台。
你想，自動事情發生。
對於這一點，你需要使用激活某些事件發生的事件。
您可以查看文檔的全部細節。
所以，讓我們來看看。我們想要隱藏或顯示框，
但現在這個按鈕沒有做任何事情，因為我沒有實現它。
我打算去實際的HTML頁面。
下面的幻燈片。有一個div幻燈片。
它具有類幻燈片。
有文字。現在，有此箱與彩盒按鈕。
我們如何真正使這個消失？
首先，讓我們寫一個函數，使得盒ID消失。
這是的語法FUNTION，讓，姑且稱之為hideTheBox。
它不帶任何參數，因為沒有參數應採取。
我們可以選擇框的ID。
因此，使用jQuery的選擇，我們可以選擇框ID，
，然後就讓它消失。
讓我們把它淡出。
如果我們運行這個功能在實際的控制台，
我們可以定義此功能，我們可以稱之為hideTheBox，和它的作品。
但是，我們希望它發生，實際上是按下按鈕時。
要做到這一點，我們必須使用一個事件。
要綁定一個事件，某些特定的按鈕，或發生一些動作，
我們必須選擇將觸發該事件的元素 -
或將觸發該事件，對不起。
>> 因此，首先，讓我們來選擇框按鈕的ID
因為的按鈕，現在，該按鈕，
我們要創建一個動畫時，它的點擊。
所以有這個點擊功能。
它允許你綁定另一個功能。
這個函數接受另一個函數作為參數
我們可以通過在hideTheBox功能，
每當這個按鈕被點擊時，該功能會自動執行。
因此，這將工作，如果我們保存這一點，我會刷新，
- 第二，我很抱歉。
讓我解決這個問題真的很快。
好吧。我們去那裡。所以現在的方塊消失，當我們點擊按鈕。
我們也可以改變這個只是fadeToggle，
改變它只是隱藏或顯示框，
這也太多，如果我們刷新。
我們可以將其隱藏，我們也可以表現出來，而且將繼續努力。
我們可以做的另一件事是，我們不居然有定義此hideTheBox功能
之前我們所說的點擊功能。
因此，而不是定義函數和調用hideTheBox的，
我們只是去調用它，如果點擊這個東西。
因此，我們可以將它定義匿名在這裡，
這是一個功能的JavaScript。
你可以定義一個函數，通常情況下，我們會說功能hideTheBox
參數，而是，我們就可以說函數沒有參數，
啟動大括號來定義函數，
關閉，大括號，然後就在這裡定義的功能，
第一個括號內的最後一個括號
對應的點擊功能參數。
因此，我們通過在這個函數中，我們可以複製這行代碼就在這裡，
那會做同樣的事情。
現在我們沒有這個的隨機fadeTheBox功能
圍坐沒有明顯的原因。
該函數被定義的匿名，它不會有一個名稱。
它只會執行包裝盒上的按鈕，當我們點擊。
讓人耳目一新一次，再來一次，你可以看到，它仍然有效。
這就是你如何創建活動。
>> 有很多不同的事件，我們可以使用。
我要切換回使用控制台只是向你展示如何將這些工作。
為每個這些的ID對應的每個方塊。
因此，這盒是點擊ID，這是一個關鍵的ID，這一個是鼠標ID。
還有一件事是，有這個動作功能，而不是每次打字，
其實，我說乾就幹，這個動作定義功能在這裡。
做同樣的事情作為hideTheBox功能。
它得到這個框，要么變淡或消失它。
這就是為什麼我們能夠使用它。
因此，如果我們點擊這個鍵式身份證，我們希望使框消失或再現。
這是同樣的事情，我們不得不在最後一張幻燈片的按鈕。
現在我們稱之為後，我們可以點擊這個框將消失，
然後點擊它再次框將再次出現。
這是非常簡單的。雙擊做同樣的事情，
它除了需要雙擊。
所以，如果你點擊了一次，再次點擊它什麼都不會發生，
但如果你雙擊，它會迅速消失。
如果你再次雙擊，它會回來的。
所以這是很簡單的。
鍵盤輸入是一種怪異的，我不認為它確實可以工作在這個例子中
因為下來的關鍵，關鍵和重要的新聞和其他關鍵行動
激活不管什麼元素，你把它綁定到。
例如，即使我身體或別的東西完全綁定鍵，
那麼它仍然會激活不管 - 這是不特定的。
我沒有點擊按一個鍵做任何事情消失。
它會被激活，無論什麼樣的元素，我目前所在
因此，這些實際上並不在這個例子中
因為它不認識我了輸入到鍵盤輸入格。
>> 但是，如果你看一下鼠標操作，
第一個是徘徊，它可以做一些使用CSS。
如果你使用CSS，你可以創建，因此，如果您將鼠標懸停在東西，
那麼它的風格變化。
但是，使用jQuery，你可以改變的樣式，以及其他的東西。
因此，舉例來說，我們要打電話的行動，如果我們將鼠標懸停在這個div。
這意味著，如果我們將鼠標懸停在它，那麼對話框就會消失。
如果我們遠離它移動，方塊會重新出現。
如果我們把這種和它懸停，盒子消失，
只要我們搬開，它回來了。
如果我們把這種懸停鼠標ID功能，
對應此框，然後如果我們將鼠標懸停在該框，
然後框實際上會消失 - 它是時髦的權利，但 -
如果我們將遠離它，它會重新出現。現在它是向後的一些原因。
鼠標進入和鼠標移動的功能有些相似，但略有不同。
鼠標進入時，只激活鼠標進入箱，如預期。
所以，如果你進入它，它會消失。
但它不會再次出現時，你搬走，你將不得不搬回到它回來。
還有鼠標移動功能，這將激活
每當鼠標甚至在框中。
所以就繼續走，淡入淡出。
它實際上是記錄 - 好像它只是淡入淡出，
但它實際上是記錄了很多比這更多的行動，
所以，當你搬走它會繼續下去，因為它像一個三千人登錄。
也許不是一千年。也許五年。
它記錄不止於此。
問題的關鍵是，所有的鼠標操作，也有很多人。
你可以閱讀其他的，但他們都略有不同，
你可以挑你最需要
任何特定目的，你要怎樣做。
>> 接下來的事情，我要談的是AJAX。
AJAX，我知道我們沒有盡可能多的深度覆蓋的JavaScript今年，
所以我只是談談AJAX一般一分鐘。
AJAX是異步JavaScript和XML。
它基本上是，例如，當你在Facebook和它推動你的通知，
這是因為AJAX的Web瀏覽器上運行。
您的網頁瀏覽器實際上每幾秒鐘
Facebook的服務器，要求他們，你有什麼新的東西，對我來說，
然後還給你。
這允許你發送請求到服務器
沒有實際加載頁面。
所以通常情況下，如果你只是使用PHP和數據庫，
你必須刷新頁面，才可以從服務器得到新的信息。
但是，使用AJAX，你可以拉新的信息不斷，
或拉它，當你點擊一個按鈕或類似的東西。
因此，這使得我們無需重新加載頁面發送請求，
我們可以使用GET或POST請求。
>> GET請求是，例如，如果你到Google.com
做Q =測試。這是給他們一個查詢測試。
這是一個GET請求，因為它在這些參數傳遞到URL本身。
如果你通過郵寄發送POST請求。
這就像你把它放在一個字母和運送他們，
但他們沒有真正看到的內容。他們不是在URL中可見。
你不能直接鍵入它，你必須把它幾乎偷偷。
這是在一個崗位。
但是，使用jQuery，你可以做的GET和POST請求
更容易比你通常可以只使用普通的JavaScript。
可以查詢的API使用GET請求，你也可以檢查登錄信息。
在接下來的頁面中，我創造了這個，問，“什麼是午餐嗎？”
使用哈佛食品API，讓我們拉起來。
這僅僅是一個例子，可以如何使用jQuery做一個GET請求的API
並獲得信息。
因此，我們希望看到今天的菜單，
我們想看看有什麼吃午飯。
這裡是在jQuery創建一個GET請求的URL。
您使用$得到的功能。
第一個參數是URL，所以正是你查詢。
那麼接下來的參數是一個GET請求完成時執行的函數。
所以你發送一些請求到服務器，等待它回來。
當它回來，你要採取一些行動，從服務器返回的數據。
讓我們繼續前進，並編寫這一點。
我沒有編碼要么目的。
這裡的TODO。首先，讓我們用事件綁定
這樣，當按下這個按鈕，我們發送一個GET請求。
而當GET請求返回一些數據，
我們將它寫入這頓飯信息ID格。
首先，讓我們來選擇食物的按鈕的ID。
當點擊時，我們希望它做的事情。
讓我們只是讓一個匿名機能的，如前。
可以換那些大括號，
按下此按鈕時，我們要發送一個GET請求
檢查有什麼吃午飯。
要做到這一點，我們就可以鍵入$。
這是一個jQuery的功能，使用美元符號。
這需要幾個參數。第一個是URL，
第二個是回調函數，這就是所謂的功能
當該請求返回。
就讓我們先構建URL。
我們可以得到它的API大衛寫了。
在這裡，我們可以看到，它是food.cs50.net/api/1.3/menus，
然後你只是傳遞的參數，你會喜歡的名字。
因此，參數1值1。
它看起來像標準的日期，開始日期默認為今天
如果你不輸入任何內容，和結束日期也默認
今天，如果你不輸入任何東西。
這就是我們想要的。我們希望今天剛剛得到的信息。
>> 我們想要的格式是JSON。
這只是任意的，你可以使用任何你想要的形式。
您可以使用CSV，但JSON是JavaScript對象符號。
它為JavaScript很容易明白這意味著什麼，
我們可以把它打印出來更容易的方式。
因此，我們要求它在JSON和讓我們請求午餐。
所以，餐=午餐。只是寫網址，我們這裡回去。
有菜單。第一個參數是輸出= JSON
因為這是我們想要的，分隔參數'。“
第二個參數是 - 我不記得了。
膳食。我們想要一頓=午餐。
你可以測試這個URL輸入到瀏覽器中去它。
它會給你一些輸出。它只是一堆東西，吃午飯。
在這個醜陋格式。我們要打印到我們的網頁在一個更好的格式。
因此，URL是正確的，現在我們只需要編寫一個函數
時回電請求成功。
此功能將採取實際的說法。它能將數據。
這些數據是回來從GET請求GET請求後完成。
我們可以做的大括號，在這裡，我們寫的匿名函數
執行時，使用該數據時，我們得到的信息。
所以數據，當我們輸入這個網址，
這是什麼樣的數據是怎麼回事的樣子。這將是這個龐大的字符串。
但好事是，JavaScript可以解析它使用JSON.parse功能的。
因此，讓我們來創建一個新的變量解析數據。
和解析數據是一個對象數組。
每個對象都包含的信息，如 - 好吧，讓我們來看看。
它的日期，一頓飯，類別，配方，這一切其他的東西。
因此，讓我們為每一個打印出了名。
讓我們遍歷整個數組的東西，我們回來，
剛剛打印出來的每一個 - 打印出每個人的名字。
這是一個循環。
>> JavaScript有這個有用的語法，在這裡你可以創建一個數組變量和循環，
變種i是迭代器，所以，而不必做VAR = 0
我是長度小於，我+ +，你可以這樣做var目錄中解析數據。
在這個例子中，解析出的數據（一）將對應於當前元素
的數組，實際的對象。
我們想要得到出了名的。
因此，讓我們只是做名字。
的最後一件事是，我們要再次有一些jQuery。
其實它添加到div，這頓飯資訊目前是空的div中。
因此，讓我們選擇。
我們將使用jQuery和選擇膳食信息的div ID，或飯後信息ID，對不起。
我們要追加到此。
如果我們做了測試，例如，它只是覆蓋它每一次。
因此，我們就可以追加。
當前數組中的元素，我們會得到出了名的，它
我們會追加結束了一頓信息ID DIV。
然後只是為了使它看起來更簡潔，
我們還會追加一個換行符，所以它不是全部在一行。
因此，如果一切順利的話，這應該是一件好事 -
首先，只要按一下這個按鈕，
它會發送一個GET請求來此URL。
當數據回來時，它會解析它，
把它變成JSON，循環整個數組，表示該數據，
然後追加的名稱和一個換行符
原先是空的這頓飯信息ID的每一行。
所以回到這個頁面，我們會刷新，
點擊，找到了 - 這是行不通的。這是不幸的。
這是在調試的用武之地。
index.html的1號線。
那很有意思。
所有權利，而不是花時間做這個，我只是去
拉起我有完成的文件，這是完成的版本。
我不知道有什麼區別，但我們可以打開這件事，而不是。
我們去了AJAX，這應該正常工作。
這就是今天的午餐，
在沒有特定的順序，用引號括起來，所以它不是最漂亮的。
但是，很明顯，如果你做這個項目的最後，
你會讓它看起來更好。
但是，這只是一個簡單的例子，你是怎麼做到的GET請求。
如果我們看看實際的代碼，我猜，我敢肯定
它仍然是幾乎相同的。
哦，我忘了把它轉換為一個字符串，就是這樣。
沒有，它仍然沒有工作。無論如何，這裡是實際完成的代碼
這看起來應該像，
做同樣的事情，我只是實施。
當你按一下按鈕，它使用自動解析JSON數據。
它採用數據和遍歷整個數組
- 無論是今天的午餐，它的名字打印出來，
每一行後追加一個換行符。
這就是你如何使用GET功能。
>> 您也可以使用POST，這是我沒有時間
寫了一個例子，但我們可以看看它的文檔。
如果你看看jquery.post，
你可以看到，它幾乎同樣的事情。
你有一個網址，而是通過參數使用 -
只是把他們在字符串的URL本身，
你必須通過在該數據變量
基本上是一個數組，字典映射參數值。
您傳遞，他們在使用POST發送。
一旦你有，那麼你就可以有一個成功的功能
時執行的數據回來。
否則，它是完全一樣的。因此，使用POST，
你可能想使用POST，例如，如果你有一個輸入表單
你讓人家進去，輸入密碼並發送這些密碼關閉
您的後端腳本，在數據庫中檢查該用戶是否是有效或無效。
你可以這樣做，所有使用jQuery，而不必刷新頁面。
這就是我在博客中，我發現你剛才實施。
如果我們去年底門戶和註銷，註銷，
退出不起作用。
好吧，讓我在新窗口中打開它。
這裡有一個密碼，我正想輸入隨機的東西。
這是行不通的，但你可以看到，我們沒有
其實有刷新頁面。
的代碼，如果你想看看它，
在這裡是所有可用的。
所以我寫的代碼去年的某個時候。
在這裡，你可以看到我們發送POST請求。
我有一個文件叫的login.php在後端，
檢查，如果密碼是有效的。
我們傳遞的參數是密碼，映射到
目前在這個輸入框中輸入。
當數據回來，我們檢查。
如果數據是假的，那麼我們說密碼不正確，將其向下滑動，
只是讓它消失之後。
否則，我們的管理頁面加載。
而這一切都是使用JSON。
在這個多行代碼，你就可以將數據傳遞到後端，
檢查它是否是正確的，請檢查是否正確登錄，
實際響應，重定向到正確的頁面的人
或不讓他們登錄並告訴他們，他們有一個不正確的密碼。
所以這是一個例子，你如何可以使用jQuery POST
發送POST請求到後端，
檢查是否有人在正確的記錄。
>> 所有的權利，所以這是我有所有的例子，所有的東西，我想掩蓋。
這些都是重大的事情，jQuery允許你做：
選擇元素，修改它們使用DOM操作，
您可以添加效果，激活在某些事件上的東西，
也非常無縫地做AJAX請求。
所以，謝謝你的到來或觀看，
如果你有任何問題，只是讓我知道。是嗎？
[學生]當你發現，你有JSON後引號中的POST請求，
我只是想知道做什麼。
是啊，我明白了。現在的問題是，在這個例子中，我只是表明，
周圍的引號的字JSON -
我只是拉起來了 - 周圍的POST功能。
我只是拉來顯示。
因此，這裡的這個POST請求，並在引號中有此JSON。
這只是定義了我們所期望的輸出。
因此，如果我們通過JSON作為預期的數據類型，
它不是一個要求，但是如果我們通過它，
那麼數據就會被自動解析為JSON。
所以我們不必調用JSON解析功能，
它會自動發生。
如果你看看在POST的文檔，
有這樣的數據類型的變量，從服務器上的數據，不同的。
它默認的智能猜測，可能是錯的，
所以你可以讓它空白，但它只是數據的類型
在編碼你使用，無論是JSON或XML或別的東西。
>> 任何其他的問題嗎？
好的。如果您有任何其他問題，請隨時給我發電子郵件
在vshekhawat@college.harvard.edu，
幻燈片和代碼可在網上很快。
祝你好運與您的最終項目，希望你使用jQuery。
[CS50.TV]