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

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

先定一個(gè)小目標(biāo)！掌握Ajax方法的使用，能夠根據(jù)不同的場景靈活運(yùn)用Ajax方法知識儲備2.Ajax方法jQuery提供了便捷的Ajax方法，只需調(diào)用相應(yīng)的方法即可實(shí)現(xiàn)Ajax操作。調(diào)用Ajax方法可以快速地實(shí)現(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請求從服務(wù)器獲取JSON數(shù)據(jù)底層方法$.ajax(url[,settings])發(fā)送自定義請求知識儲備2.Ajax方法下面對jQuery中常用的Ajax方法的參數(shù)進(jìn)行解釋。參數(shù)url表示請求地址。參數(shù)data表示要發(fā)送的數(shù)據(jù)。參數(shù)success表示請求成功時(shí)執(zhí)行的回調(diào)函數(shù)。參數(shù)dataType表示期待從服務(wù)器中返回的數(shù)據(jù)格式，如XML、JSON、TEXT等。參數(shù)settings表示一個(gè)鍵值對集合，用于配置請求的相關(guān)選項(xiàng)，所有選項(xiàng)都是可選的。知識儲備2.Ajax方法請求的常用選項(xiàng)如下表所示。選項(xiàng)說明url處理請求的服務(wù)器地址data發(fā)送請求時(shí)傳遞的數(shù)據(jù)type請求方式，常見的可選值為GET、POSTdataType期待的數(shù)據(jù)格式，常見的可選值為XML、JSONasync是否異步執(zhí)行操作，可選值為true（默認(rèn)值）、false知識儲備2.Ajax方法>>續(xù)上表選項(xiàng)說明cache是否緩存，可選值為true（默認(rèn)值）、falsecontentType內(nèi)容類型，默認(rèn)值為'application/x-www-form-urlencoded;charset=UTF-8'success在請求成功時(shí)執(zhí)行的回調(diào)函數(shù)complete在請求完成時(shí)執(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方法上述示例代碼運(yùn)行后，初始頁面效果如下圖所示。依次單擊“調(diào)用$.get()方法發(fā)送GET請求”“調(diào)用$.post()方法發(fā)送POST請求”“調(diào)用$.ajax()方法發(fā)送自定義請求”按鈕，控制臺中輸出的結(jié)果如下圖所示。任務(wù)實(shí)現(xiàn)

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

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

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

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

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

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

溫馨提示

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

最新文檔

評論

0/150

提交評論