《JavaScript與jQuery網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版》課件 CH12 jQuery AJAX

JavaScript與jQuery

網(wǎng)頁(yè)前端開(kāi)發(fā)與設(shè)計(jì)-第2版學(xué)校名稱(chēng)：XXXX主講教師：XXXX第12章jQueryAJAX技術(shù) 本章學(xué)習(xí)目標(biāo)了解什么是AJAX以及AJAX技術(shù)的組成部分；了解什么是jQueryAJAX；掌握jQueryload()、get()、post()以及ajax()等常用方法的使用；掌握jQueryAJAX事件的用法。目錄12.1jQueryAJAX簡(jiǎn)介12.2準(zhǔn)備工作

12.3jQueryAJAX常用方法 12.4jQueryAJAX事件12.5階段案例：簡(jiǎn)易單詞查詢(xún)12.1jQueryAJAX簡(jiǎn)介

12.1.1什么是AJAX12.1.2AJAX的實(shí)現(xiàn)原理

12.1.3jQueryAJAX 12.1.1什么是AJAXAJAX來(lái)源于英文詞組AsynchronousJavaScriptandXML（異步JavaScript和XML）的首字母縮寫(xiě)，是一種可以與服務(wù)器異步交互數(shù)據(jù)的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。該名稱(chēng)是在2005年2月首次出現(xiàn)，由AdaptivePath公司的JesseGarrett在Ajax:AnewapproachtoWebApplication一文中提到。使用AJAX技術(shù)可以在不重新加載整個(gè)頁(yè)面的前提下直接更新當(dāng)前頁(yè)面中的指定內(nèi)容，例如GoogleSuggest和GoogleMaps就是兩種使用了AJAX技術(shù)的Web應(yīng)用。12.1.1什么是AJAX事實(shí)上，AJAX是由多種當(dāng)前主流的技術(shù)組合而成的，包含如下內(nèi)容：使用XTHML和CSS進(jìn)行標(biāo)準(zhǔn)化表達(dá)；使用DOM(DocumentObjectModel)實(shí)現(xiàn)動(dòng)態(tài)展示和交互；使用XMLHttpRequest實(shí)現(xiàn)異步數(shù)據(jù)獲取；使用JavaScript綁定所有技術(shù)綜合應(yīng)用。12.1.2AJAX的實(shí)現(xiàn)原理AJAX可以讓瀏覽器和服務(wù)器端進(jìn)行異步交互，其實(shí)現(xiàn)原理可以分成5個(gè)步驟，如下圖所示。12.1.2AJAX的實(shí)現(xiàn)原理當(dāng)網(wǎng)頁(yè)頁(yè)面需要顯示從服務(wù)器端查詢(xún)到的數(shù)據(jù)信息時(shí)，先使用JavaScript調(diào)用XMLHTTPRequest對(duì)象，該對(duì)象允許JavaScript向服務(wù)器端發(fā)出HTTP請(qǐng)求并且不阻塞用戶(hù)。服務(wù)器收到請(qǐng)求后在自身后臺(tái)處理請(qǐng)求并將響應(yīng)結(jié)果返回給瀏覽器，其中有用的數(shù)據(jù)信息可以封裝成文本、HTML、XML或JSON等形式發(fā)出，再由瀏覽器端解析數(shù)據(jù)包后獲取里面的詳細(xì)內(nèi)容。最后，繼續(xù)使用JavaScript操作HTMLDOM對(duì)象來(lái)直接更新頁(yè)面中的內(nèi)容，無(wú)需刷新網(wǎng)頁(yè)。12.1.3jQueryAJAX在不使用jQueryAJAX技術(shù)時(shí)，JavaScript創(chuàng)建XMLHTTPRequest對(duì)象時(shí)還得考慮不同瀏覽器的兼容性問(wèn)題，節(jié)選部分參考代碼如下：//非IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象if(window.XmlHttpRequest){xmlhttpReq=newXmlHttpRequest();}//IE瀏覽器創(chuàng)建XmlHttpRequest對(duì)象if(window.ActiveXObject){try{xmlhttpReq=newActiveXObject("Microsoft.XMLHTTP");}catch(e){try{xmlhttpReq=newActiveXObject("msxml2.XMLHTTP");}catch(ex){}}}如果使用了jQueryAJAX技術(shù)，上述代碼的復(fù)雜內(nèi)容只需要一個(gè)$.ajax()就可以完成。12.1.3jQueryAJAXjQuery提供了關(guān)于AJAX的一系列方法，使得開(kāi)發(fā)者可以更方便地從服務(wù)器端請(qǐng)求文本、HTML、XML或JSON形式的數(shù)據(jù)。jQueryAJAX技術(shù)中封裝的函數(shù)可以化簡(jiǎn)原本復(fù)雜繁瑣的AJAX相關(guān)代碼，使得程序員可以更多關(guān)注產(chǎn)品的實(shí)現(xiàn)。12.1.3jQueryAJAX注：由于Chrome內(nèi)核瀏覽器的安全機(jī)制不允許使用AJAX請(qǐng)求本地文件，因此本章節(jié)均使用了在本地電腦中臨時(shí)搭建服務(wù)器的方式（搭建方式見(jiàn)12.2）作為例題運(yùn)行效果的截圖以供參考，后面不再逐一解釋。讀者在實(shí)際運(yùn)用中如果采用了第三方服務(wù)器環(huán)境則無(wú)需考慮瀏覽器的限制問(wèn)題。12.2準(zhǔn)備工作12.2.1臨時(shí)服務(wù)器的搭建12.2.2文件訪(fǎng)問(wèn)測(cè)試12.2.1臨時(shí)服務(wù)器的搭建若開(kāi)發(fā)者條件受限，可以將PC端臨時(shí)部署為模擬服務(wù)器進(jìn)行開(kāi)發(fā)和測(cè)試。開(kāi)發(fā)者可以根據(jù)自己的實(shí)際情況選擇Apache、Ngnix、Tomcat等任意一款服務(wù)器軟件進(jìn)行安裝部署，以及選用PHP、Node.js、J2EE等任意一種語(yǔ)言進(jìn)行后端開(kāi)發(fā)。12.2.1臨時(shí)服務(wù)器的搭建初學(xué)者可以直接使用第三方免費(fèi)套件幫助我們快速搭建模擬服務(wù)器環(huán)境，這里以phpStudyV8.1套裝軟件（包含了Apache/Nginx、PHP和MySQL）為例，部署步驟如下：（1）下載安裝包（官方網(wǎng)址），在PC端中雙擊安裝。（2）完成后啟動(dòng)Apache/Nginx服務(wù)器，如圖所示。（3）在WWW目錄下創(chuàng)建自定義目錄，例如ajaxDemo，未來(lái)可以在該目錄下放置圖片素材或PHP文件。至此臨時(shí)部署完畢，用戶(hù)可以隨時(shí)更改服務(wù)器上的目錄地址和PHP文件代碼。12.2.2文件訪(fǎng)問(wèn)測(cè)試臨時(shí)服務(wù)器的WWW目錄就是根目錄，它的網(wǎng)絡(luò)地址是“http://localhost/”或“/”。開(kāi)發(fā)者可以在根目錄下自行創(chuàng)建目錄和文件，例如在ajaxDemo中創(chuàng)建了hello.txt文件，那么該文件的URL地址就是“http://localhost/miniDemo/hello.txt”。在文本文件中隨意寫(xiě)一句話(huà)，例如寫(xiě)上“Hello”，然后用瀏覽器訪(fǎng)問(wèn)該文件的地址，效果如下圖所示。注意：如果要顯示中文需要把文本文件保存為UTF-8編碼格式，否則可能會(huì)顯示亂碼。12.2.2文件訪(fǎng)問(wèn)測(cè)試以PHP類(lèi)型的文件為例，就可以用來(lái)編寫(xiě)代碼制作請(qǐng)求接口了。PHP文件的返回語(yǔ)句是echo，例如：這樣發(fā)送ajax請(qǐng)求后將會(huì)收到引號(hào)里面的文字內(nèi)容。開(kāi)發(fā)者也可以直接用瀏覽器訪(fǎng)問(wèn)該地址，能獲得同樣的文字內(nèi)容（如下圖所示），因此可以在開(kāi)發(fā)之前直接使用瀏覽器測(cè)試PHP文件是否正確。<?phpecho'你好！';?>12.3jQueryAJAX常用方法12.3.1jQueryAJAXload()方法 12.3.2jQueryAJAXget()方法 12.3.3jQueryAJAXpost()方法 12.3.4jQueryAJAXajax()方法 12.3.5jQueryAJAX更多方法介紹12.3.1jQueryAJAXload()方法 jQueryAJAXload()方法可以向服務(wù)器端發(fā)送數(shù)據(jù)獲取請(qǐng)求，并將已獲取到的數(shù)據(jù)加載到指定的HTML元素中。其語(yǔ)法格式如下：$(selector).load(URL[,data][,callback]);12.3.1jQueryAJAXload()方法 其中URL為必填參數(shù)，data和callback為可選參數(shù)。具體解釋如下：

URL參數(shù)用于規(guī)定需要獲取數(shù)據(jù)的URL地址，可以是文本、XML或者JSON數(shù)據(jù)；

data參數(shù)用于規(guī)定與請(qǐng)求一起發(fā)送給服務(wù)器的字符串，該字符串以鍵/值對(duì)集合的形式組成；

callback參數(shù)用于規(guī)定load()方法完成后需要執(zhí)行的函數(shù)。1. 常規(guī)使用例如，將文件test.txt的內(nèi)容加載到id="demo"的段落元素<p>中。jQuery將使用.innerHTML屬性將指定元素中的全部?jī)?nèi)容更新為test.txt中的文本內(nèi)容。如果只需要加載的文件中的某個(gè)HTML元素，則可以在URL參數(shù)中追加jQuery選擇器來(lái)篩選需要加載的元素。$("#demo").load("test.txt");12.3.1jQueryAJAXload()方法12.3.1jQueryAJAXload()方法1. 常規(guī)使用例如，將文件test.txt中class="style01"的<div>元素加載到id="demo"的段落元素<p>中。需要注意的是，以上兩種情況的選擇器都必須是在網(wǎng)頁(yè)文檔中實(shí)際存在的HTML元素，否則AJAX請(qǐng)求將不會(huì)被發(fā)出。$("#demo").load("test.txt

div.style01");12.3.1jQueryAJAXload()方法1. 常規(guī)使用【例12-1】jQueryAJAXload()方法的簡(jiǎn)單應(yīng)用12.3.1jQueryAJAXload()方法2. 回調(diào)函數(shù)的使用jQueryAJAXload()方法中的可選參數(shù)callback規(guī)定了數(shù)據(jù)加載完成后需要執(zhí)行的回調(diào)函數(shù)。該函數(shù)包含了三個(gè)參數(shù)，其語(yǔ)法格式如下：$(selector).load(URL[,data],function(response,status,xhr){//回調(diào)函數(shù)的內(nèi)部代碼略});12.3.1jQueryAJAXload()方法2. 回調(diào)函數(shù)的使用其中三個(gè)參數(shù)具體解釋如下：response參數(shù)為調(diào)用成功時(shí)的結(jié)果內(nèi)容；status參數(shù)為調(diào)用的狀態(tài)，例如"success"或"error"等；xhr參數(shù)表示XMLHttpRequest對(duì)象。12.3.1jQueryAJAXload()方法2. 回調(diào)函數(shù)的使用【例12-2】jQueryAJAXload()方法中回調(diào)函數(shù)的使用12.3.2jQueryAJAXget()方法jQueryAJAXget()方法通過(guò)HTTPGET請(qǐng)求從服務(wù)器端獲取數(shù)據(jù)，其語(yǔ)法格式如下：$.get(URL[,data][,success][,dataType]);12.3.2jQueryAJAXget()方法其中URL為必填參數(shù)，data、success和dataType均為可選參數(shù)。具體解釋如下：URL參數(shù)用于規(guī)定請(qǐng)求的URL地址；data參數(shù)用于規(guī)定與請(qǐng)求一起發(fā)送給服務(wù)器的字符串，該字符串以鍵/值對(duì)集合的形式組成；success參數(shù)用于規(guī)定請(qǐng)求成功后需要執(zhí)行的函數(shù)，如果沒(méi)有該參數(shù)則返回的數(shù)據(jù)將被忽略；dataType參數(shù)用于規(guī)定從服務(wù)器端獲取的數(shù)據(jù)類(lèi)型，例如xml、json、html等。12.3.2jQueryAJAXget()方法如果沒(méi)有數(shù)據(jù)需要發(fā)送給服務(wù)器，也無(wú)需處理獲取的數(shù)據(jù)，可以只使用參數(shù)URL。例如：上述代碼表示向demo.php請(qǐng)求數(shù)據(jù)，但是獲取到的數(shù)據(jù)將被忽略不做任何處理。$.get("demo.php");12.3.2jQueryAJAXget()方法如果需要處理獲取到的數(shù)據(jù)，則需要追加參數(shù)success。例如：

上述代碼表示向demo.php請(qǐng)求數(shù)據(jù)，并使用alert()方法將獲取到的數(shù)據(jù)顯示在警告消息框中。其中function(data)中的參數(shù)data就是獲取到的數(shù)據(jù)返回值，在實(shí)際開(kāi)發(fā)的過(guò)程中可以對(duì)其進(jìn)行更為具體的處理。$.get("demo.php",function(data){alert("獲取的數(shù)據(jù)是："+data);});12.3.2jQueryAJAXget()方法如果有數(shù)據(jù)需要一并提交給服務(wù)器，則需要再追加參數(shù)data。例如：上述代碼表示向demo.php請(qǐng)求數(shù)據(jù)，并將name和age值發(fā)送給服務(wù)器等待處理，最后使用alert()方法將獲取到的數(shù)據(jù)顯示在警告消息框中。其中{name:"Tom",age:"23"}中的元素個(gè)數(shù)、名稱(chēng)和值均可以自定義，元素之間用逗號(hào)隔開(kāi)即可。$.get("demo.php",{name:"Tom",age:"23"},function(data){alert("獲取的數(shù)據(jù)是："+data);});12.3.2jQueryAJAXget()方法【例12-3】jQueryAJAXget()方法的使用12.3.2jQueryAJAXget()方法jQueryAJAXpost()方法通過(guò)HTTPPOST請(qǐng)求從服務(wù)器端獲取數(shù)據(jù)，其語(yǔ)法格式如下：$.post(URL[,data][,success][,dataType]);12.3.3jQueryAJAXpost()方法其中URL為必填參數(shù)，data、success和dataType均為可選參數(shù)。具體解釋如下：URL參數(shù)用于規(guī)定請(qǐng)求的URL地址；data參數(shù)用于規(guī)定與請(qǐng)求一起發(fā)送給服務(wù)器的字符串，該字符串以鍵/值對(duì)集合的形式組成；success參數(shù)用于規(guī)定請(qǐng)求成功后需要執(zhí)行的函數(shù)名稱(chēng)，如果沒(méi)有該參數(shù)則返回的數(shù)據(jù)將被忽略；dataType參數(shù)用于規(guī)定從服務(wù)器端獲取的數(shù)據(jù)類(lèi)型，例如xml、json、html等。12.3.3jQueryAJAXpost()方法post()與get()方法的區(qū)別在于請(qǐng)求方式不同，而代碼格式基本一致，因此這里不再進(jìn)行更多的舉例，讀者可以參照前一節(jié)get()方法的示例來(lái)對(duì)比學(xué)習(xí)。12.3.3jQueryAJAXpost()方法在實(shí)際開(kāi)發(fā)中，如果只是獲取數(shù)據(jù)或查詢(xún)結(jié)果建議使用get()方法；如果需要更新資源信息建議使用post()方法。還可以基于以下兩點(diǎn)考慮選用get()還是post()方法：HTTPGET請(qǐng)求只能向服務(wù)器發(fā)送1024字節(jié)的數(shù)據(jù)；HTTPPOST請(qǐng)求可以向服務(wù)器發(fā)送大量數(shù)據(jù)（理論上無(wú)限制，實(shí)際根據(jù)瀏覽器的類(lèi)型上限稍有不同）。HTTPGET請(qǐng)求提交的數(shù)據(jù)將明文顯示在URL上；通過(guò)HTTPPOST提交的數(shù)據(jù)會(huì)被放在HTTP包的包體中，更為安全。12.3.3jQueryAJAXpost()方法【例12-4】jQueryAJAXpost()方法的使用12.3.4jQueryAJAXajax()方法jQueryAJAXajax()是最完整的AJAX請(qǐng)求方法，包含了一系列參數(shù)的配置，可供開(kāi)發(fā)者自定義更為靈活的個(gè)性化要求。事實(shí)上，之前所學(xué)習(xí)的load()、get()和post()方法均為ajax()方法的簡(jiǎn)化版（省略了一些固定不變的參數(shù)配置），當(dāng)簡(jiǎn)化版無(wú)法解決某些設(shè)置要求的時(shí)候可以選擇使用ajax()方法進(jìn)一步配置。12.3.4jQueryAJAXajax()方法其語(yǔ)法格式如下：該方法內(nèi)部由一個(gè)或多個(gè)名稱(chēng)/值組成，這些參數(shù)的數(shù)量、順序以及參數(shù)值均可以由開(kāi)發(fā)者根據(jù)實(shí)際開(kāi)發(fā)需求自定義。$.ajax({ name1:value1, name2:value2,

…… nameN:valueN});12.3.4jQueryAJAXajax()方法jQueryajax()可以使用的參數(shù)名稱(chēng)如表12-1所示。jQueryajax()方法內(nèi)部還可以添加一個(gè)或多個(gè)函數(shù)，可使用的函數(shù)名稱(chēng)如表12-2所示。12.3.4jQueryAJAXajax()方法常見(jiàn)用法示例如下：$.ajax({ url:"demo.php",//請(qǐng)求的URL地址 method:"POST",//請(qǐng)求的方式 data:{username:"admin",password:"123"},//需要發(fā)送給服務(wù)器端的數(shù)據(jù) dataType:"json",//從服務(wù)器端獲取數(shù)據(jù)的類(lèi)型 success:function(){ alert("請(qǐng)求成功！"); }, error:function(){ alert("請(qǐng)求失??！"); }});上述代碼就是一個(gè)自定義的ajax()方法，開(kāi)發(fā)者可以在此模板的基礎(chǔ)上修改參數(shù)值或追加其他參數(shù)內(nèi)容。12.3.4jQueryAJAXajax()方法【例12-5】jQueryAJAXajax()方法的使用12.3.5jQueryAJAX更多方法介紹除了上述常用方法外，關(guān)于jQueryAJAX更多方法如表12-3所示。方法名稱(chēng)解釋ajaxComplete()當(dāng)AJAX請(qǐng)求完成時(shí)觸發(fā)ajaxComplete事件，并執(zhí)行該函數(shù)。ajaxError()當(dāng)AJAX請(qǐng)求完成并發(fā)生錯(cuò)誤時(shí)觸發(fā)ajaxError事件，并執(zhí)行該函數(shù)。ajaxSend()當(dāng)AJAX請(qǐng)求發(fā)送之前觸發(fā)ajaxSend事件，并執(zhí)行該函數(shù)。jQuery.ajaxSetup()設(shè)置未來(lái)AJAX請(qǐng)求的默認(rèn)值，也可以寫(xiě)作$.ajaxSetup()。ajaxStart()當(dāng)?shù)谝粋€(gè)AJAX請(qǐng)求開(kāi)始時(shí)觸發(fā)ajaxStart事件，并執(zhí)行該函數(shù)。ajaxStop()當(dāng)所有AJAX請(qǐng)求均完成時(shí)觸發(fā)ajaxStop事件，并執(zhí)行該函數(shù)。ajaxSuccess()當(dāng)AJAX請(qǐng)求成功時(shí)觸發(fā)ajaxSuccess事件，并執(zhí)行該函數(shù)。jQuery.getJSON()通過(guò)HTTPGET請(qǐng)求從服務(wù)器獲取JSON類(lèi)型的數(shù)據(jù)返回值，也可以寫(xiě)作$.getJSON()。jQuery.getScript()通過(guò)HTTPGET請(qǐng)求從服務(wù)器獲取JavaScript文件，并執(zhí)行該文件。也可以寫(xiě)作$.getScript()。jQuery.param()將數(shù)組或?qū)ο蟮男蛄谢?，也可以?xiě)作$.param()。serialize()將表單中的數(shù)據(jù)序列化為字符串。serializeArray()將表單中的數(shù)據(jù)序列化為JSON類(lèi)型數(shù)據(jù)。12.3.5jQueryAJAX更多方法介紹param()方法的作用示例如下：//臨時(shí)創(chuàng)建一個(gè)對(duì)象x：varx=newObject();="Mary";x.age="20";//開(kāi)始對(duì)x進(jìn)行序列化varresult=$.param(x);//返回值為name=Mary&age=2012.3.5jQueryAJAX更多方法介紹serialize()和serializeArray()方法均是對(duì)表單元素進(jìn)行序列化，前者返回字符串、后者返回JSON類(lèi)型的數(shù)據(jù)。12.3.5jQueryAJAX更多方法介紹例如，一個(gè)包含了2個(gè)文本輸入框的簡(jiǎn)易表單如下：<form><inputtype="text"name="productName"value="iPhone6s"/><br/><inputtype="text"name="productPrice"value="6800"/></form>12.3.5jQueryAJAX更多方法介紹使用serialize()將其中的數(shù)據(jù)值序列化：使用serializeArray()將其中的數(shù)據(jù)值序列化：varresult=$("form").serialize();//返回值為productName=iPhone6s&productPrice=6800varx=$("form").serializeArray();//此時(shí)x為數(shù)組對(duì)象result=JSON.stringify(x);//將x轉(zhuǎn)換為JSON字符串，其返回值如下一行所示//[{"name":"productName","value":"iPhone6s"},{"name":"productPrice","value":"6800"}]需要注意的是，serialize()和serializeArray()方法均需要表單中的控件具有name屬性方可正常使用。12.4jQueryAJAX事件AJAX請(qǐng)求發(fā)送時(shí)會(huì)依次觸發(fā)多個(gè)事件，這些事件按照作用范圍可以分為局部事件與全局事件兩種類(lèi)型。12.4jQueryAJAX事件AJAX事件按照被觸發(fā)的順序如表所示。12.4jQueryAJAX事件局部事件可以通過(guò)前面12.3.4節(jié)介紹的ajax()方法來(lái)觸發(fā)并自定義函數(shù)內(nèi)容，例如：$.ajax({ beforeSend:function(){ alert("AJAX請(qǐng)求即將處理！"); }, success:function(){ alert("AJAX請(qǐng)求成功！"); }});12.4jQueryAJAX事件全局事件可以通過(guò)bind()和unbind()方法進(jìn)行事件綁定與解除。例如，為按鈕元素<button>綁定AJAX全局事件：上述代碼表示當(dāng)AJAX請(qǐng)求發(fā)送之前將按鈕元素的文字內(nèi)容更新為“加載中……”。$("button").bind("ajaxSend",function(){$(this).text("加載中……");});12.4jQueryAJAX事件也可以直接為指定的元素調(diào)用全局事件對(duì)應(yīng)的函數(shù)方法來(lái)觸發(fā)，例如：上述代碼表示當(dāng)AJAX請(qǐng)求已經(jīng)完成時(shí)更新按鈕元素的文字內(nèi)容為“已提交”。$("button").ajaxComplete(){$(this).text("已提交");});12.5階段案例：簡(jiǎn)易單詞查詢(xún)12.5.1案例需求12.5.2準(zhǔn)備工作12.5.3界面設(shè)計(jì)12.5.4邏輯實(shí)現(xiàn)12.5.5案例思考12.5.1案例需求使用jQueryAJAX技術(shù)制作一款簡(jiǎn)易單詞查詢(xún)應(yīng)用，用戶(hù)輸入英文單詞提交后可查到單詞的中英文釋義，如果后臺(tái)數(shù)據(jù)中沒(méi)有此單詞信息則提示用戶(hù)未查到。12.5.2準(zhǔn)備工作1. 服務(wù)器準(zhǔn)備本次案例我們使用PC端安裝第三方免費(fèi)的phpStudyv8.1套件來(lái)模擬服務(wù)器效果，該套件的下載安裝以及啟動(dòng)步驟見(jiàn)第12章“12.2.1臨時(shí)服務(wù)器的搭建”。然后在服務(wù)器端的根目錄WWW下新建一個(gè)自定義目錄（例如dict）作為本次項(xiàng)目的存放路徑，這樣后續(xù)的文件在瀏覽器中的訪(fǎng)問(wèn)地址就是：這樣服務(wù)器的部署工作就完成了。http://localhost/dict/文件名或者/dict/文件名12.5.2準(zhǔn)備工作2. 詞庫(kù)文件制作綜合考慮每個(gè)單詞需要的通用字段總結(jié)如下：word：英文單詞，例如“apple”；meaning_CN：?jiǎn)卧~的中文釋義，例如“n.蘋(píng)果”；meaning_EN：?jiǎn)卧~的英文釋義，例如“n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin.”。12.5.2準(zhǔn)備工作2. 詞庫(kù)文件制作本次案例將使用較為簡(jiǎn)單的JSON格式文件進(jìn)行單詞數(shù)據(jù)的存儲(chǔ)，開(kāi)發(fā)者若學(xué)過(guò)數(shù)據(jù)庫(kù)技術(shù)也可以自行改造使用數(shù)據(jù)庫(kù)對(duì)詞庫(kù)數(shù)據(jù)進(jìn)行存儲(chǔ)。JSON格式是一種“名稱(chēng)：值”對(duì)形式的數(shù)據(jù)格式，例如：上述代碼表示存儲(chǔ)了學(xué)號(hào)（stuID）為123，姓名（name）為zhangsan的數(shù)據(jù)信息。也可以用來(lái)存儲(chǔ)多條記錄，例如：{“stuID”:”123”,“name”:”zhangsan”}[{“stuID”:”123”,“name”:”zhangsan”},{“stuID”:”456”,“name”:”lisi”},{“stuID”:”789”,“name”:”wangwu”}]這里最外層追加了中括號(hào)表示數(shù)組，每個(gè)數(shù)組元素就是原先用大括號(hào)括住的每條記錄，且數(shù)組元素之間使用逗號(hào)斷開(kāi)。12.5.2準(zhǔn)備工作2. 詞庫(kù)文件制作節(jié)選部分單詞的JSON格式效果如下：1. [2. {3. "word":"apple",4. "meaning_CN":"n.蘋(píng)果",5. "meaning_EN":"n.aroundfruitwithfirm,whitefleshandagreen,red,oryellowskin."6. },7. …8. ]注：上述示例單詞可供參考，其他數(shù)據(jù)文件見(jiàn)本書(shū)配套代碼包。12.5.2準(zhǔn)備工作2. 詞庫(kù)文件制作最后，將制作好的數(shù)據(jù)存到文本文檔中并另存為UTF-8格式的JSON文件，名稱(chēng)可以自定義，例如就叫做data.json。此時(shí)詞庫(kù)素材就制作完成了，請(qǐng)?jiān)诜?wù)器端的WWW/dict目錄下新建目錄api（僅為示例，也可以自定義其他目錄）并將詞庫(kù)文件存放進(jìn)去等待使用。12.5.2準(zhǔn)備工作3. 接口制作本示例選用了php技術(shù)來(lái)制作接口文件，并自定義文件名為search.php，同樣需要UTF-8編碼格式。接口文件search.php的內(nèi)容如下：1. <?php2. //讀取小程序端請(qǐng)求的單詞3. $word=$_GET['word'];4. 5. //讀取json文件6. $json_data=file_get_contents('data.json');7. //把json字符串強(qiáng)制轉(zhuǎn)為PHP數(shù)組8. $dict_data=json_decode($json_data,true);9.

//查詢(xún)結(jié)果

$result['status_code']=0;//0表示未查到，1表示查到了

$result['meaning_CN']='';$result['meaning_EN']='';

//遍歷查單詞

foreach($dict_dataas$obj){ //如果查到了

if($obj['word']==$word){ //更新查詢(xún)結(jié)果

$result['status_code']=1; $result['meaning_CN']=$obj['meaning_CN']; $result['meaning_EN']=$obj['meaning_EN']; //停止遍歷

break; }}//返回解釋(轉(zhuǎn)成json格式傳輸)echojson_encode($result);?>上述內(nèi)容表示根據(jù)請(qǐng)求參數(shù)word的取值查找data.json詞庫(kù)文件，并把相同單詞word的單詞釋義返回給客戶(hù)端。12.5.2準(zhǔn)備工作3. 接口制作此時(shí)接口文件就制作完成了，請(qǐng)把search.php放在服務(wù)器端的WWW/dict/api目錄下等待使用。開(kāi)發(fā)者也可以先使用瀏覽器自測(cè)接口是否有效，在瀏覽器地址欄輸入：瀏覽器運(yùn)行結(jié)果如下：http://localhost/dict/api/search.php?word=apple或者/dict/api/search.php?word=apple如果可以看到其中的“status_code”取值為1，就說(shuō)明查到了對(duì)應(yīng)的題目數(shù)據(jù)。12.5.3界面設(shè)計(jì)本案例主要分成表單和查詢(xún)結(jié)果兩個(gè)區(qū)域，其中表單內(nèi)部包含單行文本輸入框、提交按鈕和重置按鈕。結(jié)構(gòu)如圖所示。12.5.3界面設(shè)計(jì)創(chuàng)建一個(gè)HTML文件，文件名可自定義，例如Dictionary.html。在HTML5中使用<divclass="container">元素聲明查單詞整體區(qū)域，在其中嵌套表單<formid="form01">和段落元素<pid="result">分別表示表單和查詢(xún)結(jié)果區(qū)域，相關(guān)代碼如下：1. <body>2. <!--標(biāo)題-->3. <h3>簡(jiǎn)易單詞查詢(xún)程序</h3>4. <!--水平線(xiàn)-->5. <hr>6. <!--查單詞區(qū)域-->7. <divclass="container">8. <!--1表單-->9. <formid="form01"></form>10. <!--2查詢(xún)結(jié)果-->11. <pid="result"></p>12. </div>13. </body>12.5.3界面設(shè)計(jì)繼續(xù)補(bǔ)充表單中的內(nèi)容，代碼片段如下：其中單行文本輸入框<input>的placeholder屬性是用于在未輸入內(nèi)容時(shí)顯示的提示。1. <!--1表單-->2. <formid="form01">3. <!--1-1單行文本輸入框-->4. <inputid="word"type="text"placeholder="請(qǐng)輸入您要查詢(xún)的單詞"/>5. <!--1-2提交按鈕-->6. <inputtype="submit"value="提交"/>7. <!--1-3重置按鈕-->8. <inputtype="reset"value="重置"/>9. </form>12.5.3界面設(shè)計(jì)本示例使用CSS外部樣式表規(guī)定頁(yè)面樣式。在css文件夾中創(chuàng)建dict.css文件，并在HTML5文件的<head>首尾標(biāo)簽中聲明對(duì)CSS文件的引用。相關(guān)HTML5代碼片段如下：在CSS外部樣式表中設(shè)置公共樣式，相關(guān)CSS代碼如下：1. <head>2. <metacharset="utf-8">3. <title>簡(jiǎn)易單詞查詢(xún)程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. </head>1. /*公共樣式*/2. *{3. box-sizing:border-box;/*盒子尺寸包含了邊框和內(nèi)邊距*/4. }5. body{6. text-align:center;/*文本居中*/7. }12.5.3界面設(shè)計(jì)為表單區(qū)域和查詢(xún)結(jié)果段落區(qū)域設(shè)置樣式，相關(guān)CSS代碼如下：1. /*表單*/2. form{3. width:100%;/*寬度100%自適應(yīng)父容器*/4. height:90px;/*高度90px*/5. }6. /*單行文本輸入框*/7. input[type=text]{8. width:100%;/*寬度100%自適應(yīng)父容器*/9. height:30px;/*高度30px*/10. margin:10px0;/*外邊距上下10px左右0px*/11. font-size:16px;/*字體大小16px*/12. }13. /*查詢(xún)結(jié)果文本*/14. #result{15. width:100%;/*寬度100%自適應(yīng)父容器*/16. height:auto;/*高度自適應(yīng)內(nèi)容*/17. text-align:left;/*文本左對(duì)齊*/18. }12.5.3界面設(shè)計(jì)此時(shí)CSS樣式設(shè)置就全部完成了，由于谷歌內(nèi)核的瀏覽器禁止跨域訪(fǎng)問(wèn)，請(qǐng)將本次項(xiàng)目案例涉及到的html、css目錄及內(nèi)部文件、js目錄及內(nèi)部文件全部放置到服務(wù)器WWW/dict目錄下，然后在瀏覽器中訪(fǎng)問(wèn)：此時(shí)頁(yè)面就可以正確顯示出來(lái)了，如圖所示。http://localhost/dict/Dictionary.html或/dict/Dictionary.html12.5.4邏輯實(shí)現(xiàn)本示例使用外部JS文件實(shí)現(xiàn)jQuery相關(guān)代碼。在js文件夾中創(chuàng)建dict.js文件，并在Dictionary.html文件的<head>首尾標(biāo)簽中聲明對(duì)JS文件的引用。相關(guān)HTML5代碼片段如下：1. <head>2. <metacharset="utf-8">3. <title>簡(jiǎn)易單詞查詢(xún)程序</title>4. <linkrel="stylesheet"href="css/dict.css">5. <scriptsrc="js/jquery-1.12.3.min.js"></script>6. <scriptsrc="js/dict.js"></scr