jQuery前端開發(fā)任務驅動教程 課件 第8章 jQuery操作Ajax_第1頁
jQuery前端開發(fā)任務驅動教程 課件 第8章 jQuery操作Ajax_第2頁
jQuery前端開發(fā)任務驅動教程 課件 第8章 jQuery操作Ajax_第3頁
jQuery前端開發(fā)任務驅動教程 課件 第8章 jQuery操作Ajax_第4頁
jQuery前端開發(fā)任務驅動教程 課件 第8章 jQuery操作Ajax_第5頁
已閱讀5頁，還剩63頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第8章jQuery操作Ajax《jQuery前端開發(fā)任務驅動教程》學習目標/Target熟悉Ajax的概念，能夠歸納Ajax的優(yōu)勢掌握Ajax方法的使用，能夠根據(jù)不同的場景靈活運用Ajax方法掌握XML數(shù)據(jù)格式的使用，能夠在瀏覽器端接收服務器返回的XML數(shù)據(jù)掌握JSON數(shù)據(jù)格式的使用，能夠在瀏覽器端接收服務器返回的JSON數(shù)據(jù)學習目標/Target掌握事件委派的使用，能夠將子元素的事件委派給父元素掌握用戶登錄的實現(xiàn)，能夠完成用戶登錄的開發(fā)掌握用戶信息列表的實現(xiàn)，能夠完成用戶信息列表的開發(fā)掌握圖書管理系統(tǒng)的實現(xiàn)，能夠完成圖書管理系統(tǒng)的開發(fā)章節(jié)概述/Summary為了實現(xiàn)網(wǎng)頁與服務器的交互并動態(tài)更新網(wǎng)頁內(nèi)容，我們可以使用Ajax技術。Ajax是一種基于瀏覽器與服務器異步數(shù)據(jù)交互的技術。通過Ajax，可以使網(wǎng)頁與服務器進行數(shù)據(jù)交換，實現(xiàn)網(wǎng)頁內(nèi)容的動態(tài)更新，從而提升用戶的體驗。為了更方便地完成Ajax操作，可以使用jQuery中提供的Ajax方法。本章將詳細講解如何使用jQuery操作Ajax。目錄/Contents任務8.1用戶登錄任務8.2用戶信息列表任務8.3圖書管理系統(tǒng)用戶登錄任務8.1任務需求在現(xiàn)實生活中，我們經(jīng)常需要使用用戶名和密碼來訪問各種網(wǎng)站。通常情況下，網(wǎng)站會對我們提供的信息進行驗證，只有驗證成功后，我們才能進行后續(xù)操作，如訪問個人賬戶等。某公司正在開發(fā)一個用戶管理系統(tǒng)，目前正在進行用戶登錄功能的開發(fā)。本任務將使用Ajax對用戶名和密碼進行驗證。為了使瀏覽器端的程序和服務器端的程序可以進行數(shù)據(jù)交互，雙方需要約定一個服務器接口，該接口的具體信息如下。接口地址：http://localhost:3000/login。請求方式：POST。請求參數(shù)：{"username":"用戶名","password":"密碼"}。任務需求用戶登錄的開發(fā)需求如下：設計1個表單，包含用戶名、密碼和“登錄”按鈕。單擊“登錄”按鈕后，若用戶名、密碼輸入框中未填寫用戶名和密碼的相關信息，彈出提示信息“用戶名和密碼均需要填寫，請檢查~”。在用戶名輸入框中輸入admin，在密碼輸入框中輸入123456，然后單擊“登錄”按鈕，彈出提示信息“登錄成功”。在用戶名輸入框中輸入admin，在密碼輸入框中輸入123123，然后單擊“登錄”按鈕，彈出提示信息“登錄失敗”。任務需求用戶登錄頁面如下圖所示。任務需求知識儲備1.什么是Ajax

先定一個小目標！熟悉Ajax的概念，能夠歸納Ajax的優(yōu)勢知識儲備什么是Ajax呢？1.什么是Ajax知識儲備Ajax是一種瀏覽器端技術，由JavaScript、XML（eXtensibleMarkupLanguage，可擴展標記語言）和DOM（DocumentObjectModel，文檔對象模型）等多種技術組合而成。1.什么是Ajax知識儲備1.什么是AjaxAjax的優(yōu)勢如下。異步交互：Ajax使網(wǎng)頁與服務器可以在不刷新網(wǎng)頁的情況下進行交互，從而確保網(wǎng)頁與用戶的交互不被中斷。減少網(wǎng)絡傳輸數(shù)據(jù)量和交互延遲的時間：當需要更新網(wǎng)頁時，使用Ajax可以只更新網(wǎng)頁的一部分內(nèi)容，而不必刷新整個網(wǎng)頁，減少了網(wǎng)絡傳輸數(shù)據(jù)量和交互延遲的時間。減少服務器負載：通過使用Ajax，可以使網(wǎng)頁在不刷新整個頁面的情況下向服務器請求數(shù)據(jù)、獲取數(shù)據(jù)、并更新頁面的特定部分內(nèi)容。由于只有網(wǎng)頁中需要更新的部分會進行動態(tài)加載，從而減輕了服務器的處理壓力。知識儲備2.Ajax方法

先定一個小目標！掌握Ajax方法的使用，能夠根據(jù)不同的場景靈活運用Ajax方法知識儲備2.Ajax方法jQuery提供了便捷的Ajax方法，只需調(diào)用相應的方法即可實現(xiàn)Ajax操作。調(diào)用Ajax方法可以快速地實現(xiàn)Ajax功能，減少冗余代碼量，并提高開發(fā)效率。知識儲備2.Ajax方法jQuery中常用的Ajax方法如下表所示。分類方法說明快捷方法$.get(url[,data][,success][,dataType])發(fā)送GET請求$.post(url[,data][,success][,dataType])發(fā)送POST請求$.getJSON(url[,data][,success])通過GET請求從服務器獲取JSON數(shù)據(jù)底層方法$.ajax(url[,settings])發(fā)送自定義請求知識儲備2.Ajax方法下面對jQuery中常用的Ajax方法的參數(shù)進行解釋。參數(shù)url表示請求地址。參數(shù)data表示要發(fā)送的數(shù)據(jù)。參數(shù)success表示請求成功時執(zhí)行的回調(diào)函數(shù)。參數(shù)dataType表示期待從服務器中返回的數(shù)據(jù)格式，如XML、JSON、TEXT等。參數(shù)settings表示一個鍵值對集合，用于配置請求的相關選項，所有選項都是可選的。知識儲備2.Ajax方法請求的常用選項如下表所示。選項說明url處理請求的服務器地址data發(fā)送請求時傳遞的數(shù)據(jù)type請求方式，常見的可選值為GET、POSTdataType期待的數(shù)據(jù)格式，常見的可選值為XML、JSONasync是否異步執(zhí)行操作，可選值為true（默認值）、false知識儲備2.Ajax方法>>續(xù)上表選項說明cache是否緩存，可選值為true（默認值）、falsecontentType內(nèi)容類型，默認值為'application/x-www-form-urlencoded;charset=UTF-8'success在請求成功時執(zhí)行的回調(diào)函數(shù)complete在請求完成時執(zhí)行的回調(diào)函數(shù)知識儲備2.Ajax方法下面通過代碼演示如何使用$.get()、$.post()和$.ajax()方法，示例代碼如下。<body><buttonid="get_btn">調(diào)用$.get()方法發(fā)送GET請求</button><buttonid="post_btn">調(diào)用$.post()方法發(fā)送POST請求</button><buttonid="ajax_btn">調(diào)用$.ajax()方法發(fā)送自定義請求</button><script>$('#get_btn').on('click',function(){$.get('http://localhost:3000/get',function(msg){console.log(msg);});

});知識儲備2.Ajax方法>>接上頁代碼$('#post_btn').on('click',function(){$.post('http://localhost:3000/post',function(msg){console.log(msg);});});知識儲備2.Ajax方法>>接上頁代碼$('#ajax_btn').on('click',function(){$.ajax({type:'POST',url:'http://localhost:3000/post',success:function(msg){console.log(msg);}});});</script></body>知識儲備2.Ajax方法上述示例代碼運行后，初始頁面效果如下圖所示。依次單擊“調(diào)用$.get()方法發(fā)送GET請求”“調(diào)用$.post()方法發(fā)送POST請求”“調(diào)用$.ajax()方法發(fā)送自定義請求”按鈕，控制臺中輸出的結果如下圖所示。任務實現(xiàn)

先定一個小目標！掌握用戶登錄的實現(xiàn)方法，能夠完成用戶登錄功能的開發(fā)任務實現(xiàn)找到本任務的源代碼，進入“服務器端”文件夾，該文件夾中的內(nèi)容為Node.js本地HTTP服務器程序。打開命令提示符窗口，切換工作目錄到當前目錄，然后在命令提示符窗口中執(zhí)行“nodeapp.js”命令，啟動服務器。創(chuàng)建D:\jQuery\chapter08目錄，將jquery-3.6.4.min.js文件和本章配套源代碼中的css文件夾復制到該目錄，并使用VSCode編輯器打開該目錄。步驟1步驟2創(chuàng)建login.html文件，編寫用戶登錄頁面的結構并引入jquery-3.6.4.min.js文件，以及css文件夾中的login.css文件。編寫邏輯代碼，單擊“登錄”按鈕時向服務器發(fā)送請求，通過服務器進行用戶名和密碼的驗證。步驟3步驟4完成用戶登錄功能的開發(fā)任務實現(xiàn)在瀏覽器中打開login.html文件，用戶登錄的初始頁面如下圖所示。任務實現(xiàn)未填寫用戶名和密碼時單擊“登錄”按鈕的頁面效果如下圖所示。任務實現(xiàn)在用戶名輸入框中輸入admin，在密碼輸入框中輸入123456，然后單擊“登錄”按鈕，登錄成功，頁面效果如下圖所示。任務實現(xiàn)在用戶名輸入框中輸入admin，在密碼輸入框中輸入123123，然后單擊“登錄”按鈕，登錄失敗，頁面效果如下圖所示。用戶信息列表任務8.2任務需求在日常生活中，我們經(jīng)常需要查看用戶信息列表來了解一些基本信息。通過將用戶的關鍵信息以易讀的方式展示在頁面上，其他用戶或訪問者可以快速了解到用戶的姓名、年齡、愛好等基本信息。小悠是跆拳道社團的負責人，他需要開發(fā)一個用戶信息列表來統(tǒng)計社團中成員的信息。本任務需通過與服務器通信，從服務器獲取用戶信息數(shù)據(jù)，并使用jQuery將這些數(shù)據(jù)渲染在頁面的表格中，呈現(xiàn)一個用戶信息列表。為了使瀏覽器端的程序和服務器端的程序可以進行數(shù)據(jù)交互，雙方需要約定一個服務器接口，該接口的具體信息如下。接口地址：http://localhost:3000/list。請求方式：GET。請求成功返回結果如下。任務需求[{"name":"小春","age":20,"hobby":"唱歌","major":"電子信息工程"},{"name":"小夏","age":19,"hobby":"跳舞","major":"通信工程"},{"name":"小秋","age":21,"hobby":"足球","major":"計算機科學與技術"},{"name":"小冬","age":20,"hobby":"籃球","major":"軟件工程"},]用戶信息列表的開發(fā)需求如下：設計一個包含用戶名、年齡、愛好和專業(yè)的表格。使用jQuery從服務器中獲取用戶信息，并將數(shù)據(jù)渲染在頁面中。用戶信息列表的效果如下圖所示。任務需求知識儲備1.XML數(shù)據(jù)格式

先定一個小目標！掌握XML數(shù)據(jù)格式的使用，能夠在瀏覽器端接收服務器返回的XML數(shù)據(jù)知識儲備1.XML數(shù)據(jù)格式在瀏覽器與服務器進行Ajax交互時，確保雙方能夠正確識別對方發(fā)送的信息是非常重要的。為了達到這個目的，可以使用XML作為Ajax交互的數(shù)據(jù)格式。在發(fā)送Ajax請求時，可以通過將Ajax方法中的參數(shù)dataType設置為xml來指定期望接收的數(shù)據(jù)格式為XML。知識儲備1.XML數(shù)據(jù)格式下面通過代碼演示如何在瀏覽器中接收從服務器端返回的XML數(shù)據(jù)，示例代碼如下。<body><script>$.get('http://localhost:3000/xml',function(msg){console.log(msg);},'xml');</script></body>知識儲備1.XML數(shù)據(jù)格式上述示例代碼運行后，控制臺中輸出的XML數(shù)據(jù)如下圖所示。知識儲備2.JSON數(shù)據(jù)格式

先定一個小目標！掌握JSON數(shù)據(jù)格式的使用，能夠在瀏覽器端接收服務器返回的JSON數(shù)據(jù)知識儲備2.JSON數(shù)據(jù)格式JSON（JavaScriptObjectNotation，JavaScript對象表示法）是一種輕量級的數(shù)據(jù)交換格式，它采用獨立于編程語言的文本格式來存儲和表示數(shù)據(jù)。知識儲備2.JSON數(shù)據(jù)格式使用JSON可以保存各種類型的數(shù)據(jù)，包括對象、數(shù)字、字符串、數(shù)組等。JSON本質上是一個字符串，其中對象的屬性名和字符串類型的值需要用雙引號進行標注。下面演示簡單的JSON數(shù)據(jù)，示例代碼如下。{"name":"小明","age":18,"work":true}知識儲備2.JSON數(shù)據(jù)格式在發(fā)送Ajax請求時，可以通過將Ajax方法中的參數(shù)dataType設置為json來指定期望接收的數(shù)據(jù)格式為JSON。這樣設置后，如果服務器返回的數(shù)據(jù)格式是JSON，瀏覽器會自動將其解析為一個JavaScript對象，方便進行后續(xù)的處理和操作。知識儲備2.JSON數(shù)據(jù)格式下面通過代碼演示如何在瀏覽器中接收從服務器返回的JSON數(shù)據(jù)，示例代碼如下。<body><script>$.get('http://localhost:3000/json',function(msg){console.log(msg);},'json');</script></body>知識儲備2.JSON數(shù)據(jù)格式上述示例代碼運行后，控制臺中輸出的JSON數(shù)據(jù)如下圖所示。任務實現(xiàn)

先定一個小目標！掌握用戶信息列表的實現(xiàn)方法，能夠完成用戶信息列表的開發(fā)任務實現(xiàn)找到本任務的源代碼，進入“服務器端”文件夾，該文件夾中的內(nèi)容為Node.js本地HTTP服務器程序。打開命令提示符窗口，切換工作目錄到當前目錄，然后在命令提示符窗口中執(zhí)行“nodeapp.js”命令，啟動服務器。創(chuàng)建userInfoList.html文件，編寫用戶信息列表頁面的結構并引入jquery-3.6.4.min.js文件，以及css文件夾中的userInfoList.css文件。步驟1步驟2編寫邏輯代碼，在頁面加載完成后向服務器端請求用戶信息列表數(shù)據(jù)，并將數(shù)據(jù)渲染在頁面上。步驟3完成用戶信息列表的開發(fā)任務實現(xiàn)在瀏覽器中打開userInfoList.html文件，用戶信息列表的頁面效果如下圖所示。圖書管理系統(tǒng)任務8.3任務需求為了更好地維護圖書資源，圖書管理員小段決定開發(fā)一個圖書管理系統(tǒng)，并使用Ajax來實現(xiàn)查詢、添加、修改和刪除圖書信息的功能。為了讓瀏覽器端的程序和服務器端的程序可以進行數(shù)據(jù)交互，雙方需要約定服務器接口，接口信息列表如下表所示。任務需求接口地址請求方式請求參數(shù)說明http://localhost:3000/getbookGETtitle查詢圖書列表http://localhost:3000/bookGETid查詢某本圖書的信息http://localhost:3000/addPOSTtitle、author、publisher、pubdata、price添加圖書信息http://localhost:3000/editPOSTid、title、author、publisher、pubdata、price編輯圖書信息http://localhost:3000/delGETid刪除某本圖書的信息圖書管理系統(tǒng)的開發(fā)需求如下：設計一個包含編號、圖書名稱、作者、出版社、價格、出版年份、操作的圖書列表。設計一個文本框、“查詢”按鈕和“新增”按鈕。使用jQuery從服務器中獲取圖書信息，并將數(shù)據(jù)渲染在頁面中。文本框用于輸入查詢信息。若文本框的內(nèi)容為空，則單擊“查詢”按鈕默認查詢所有圖書的信息；若在文本框中輸入關鍵字，則篩選和關鍵字相關的圖書。查詢完成后，清空文本框的內(nèi)容。任務需求單擊“新增”按鈕，彈出新增圖書的表單，表單中包含圖書名稱、作者、出版社、價格、出版年份字段，還包含“提交”和“取消”按鈕。圖書信息填寫完成后，單擊“提交”按鈕即可保存圖書信息，并隱藏該表單。單擊“取消”按鈕可以隱藏該表單，并清空文本框中已輸入但未保存的內(nèi)容。在表格操作列中提供“刪除”和“修改”按鈕。在表格中，單擊每一行最后一個單元格中的“刪除”按鈕，可以刪除當前行對應的圖書信息。在表格中，單擊每一行最后一個單元格中的“修改”按鈕，彈出圖書信息編輯表單，該表單用于修改圖書信息。圖書信息編輯完成后，單擊“提交”按鈕即可保存圖書信息。任務需求圖書管理系統(tǒng)的效果如下圖所示。任務需求知識儲備事件委派

先定一個小目標！掌握事件委派的使用，能夠將子元素的事件委派給父元素知識儲備什么是事件委派呢？事件委派知識儲備事件委派是指把原本要在子元素上注冊的事件注冊到父元素上，即把子元素的事件委派給父元素。事件委派的優(yōu)勢在于，可以為未來動態(tài)創(chuàng)建的元素注冊事件。事件委派知識儲備使用on()方法可以實現(xiàn)事件委派。在on()方法中，需要指定要注冊事件的元素以及事件類型。同時，還需要提供一個選擇器作為on()方法的第二個參數(shù)，這樣只有特定的子元素才能觸發(fā)在父元素上注冊的事件。事件委派知識儲備事件委派下面通過代碼演示如何實現(xiàn)事件委派，示例代碼如下。<body><ul><li>學向勤中得，螢窗萬卷書。</li><li>三冬今足用，誰笑腹空虛。</li></ul><script>$('ul').on('click','li:first-child',function(){alert('學問是需要勤奮才能得來的，就像前人囊螢取光，勤奮夜讀，讀很多書。');});</script></body>知識儲備事件委派上述示例代碼運行后，使用事件委派的初始頁面效果如下圖所示。單擊“學向勤中得，螢窗萬卷書?！焙蟮捻撁嫘Ч缦聢D所示。任務實現(xiàn)

先定一個小目標！掌握圖書管理系統(tǒng)的實現(xiàn)，能夠完成圖書管理系統(tǒng)的開發(fā)任務實現(xiàn)找到本任務的源代碼，進入“服務器端”文件夾，該文件夾中的內(nèi)容為Node.js本地HTTP服務器程序。打開命令提示符窗口，切換工作目錄到當前目錄，然后在命令提示符窗口中執(zhí)行“nodeapp.js”命令，啟動服務器。創(chuàng)建book.html文件，編寫圖書管理系統(tǒng)的頁面結構并引入jquery-3.6.4.min.js文件，以及css文件夾中的book.css文件。步驟1步驟2編

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論