【文章內(nèi)容簡(jiǎn)介】 JAX交互。除此以外，JQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。目前JQuery主要提供如下功能：1． 訪問(wèn)頁(yè)面框架的局部這是 DOM 模型所完成的主要工作之一，DOM獲取頁(yè)面中某個(gè)節(jié)點(diǎn)或者某一類(lèi)節(jié)點(diǎn)有固定的方法，而JQuery則大大地簡(jiǎn)化了其操作的步驟。2． 響應(yīng)事件JavaScript 有處理事件的相關(guān)方法，而引入 JQuery 之后，可以更加輕松地處理事件，而且開(kāi)發(fā)人員不再需要考慮瀏覽器兼容性問(wèn)題。3． 為頁(yè)面添加動(dòng)畫(huà)通常在頁(yè)面中添加動(dòng)畫(huà)都需要開(kāi)發(fā)大量的 JavaScript代碼，而 JQuery 大大簡(jiǎn)化了這個(gè)過(guò)程。JQuery的庫(kù)提供了大量可自定義參數(shù)的動(dòng)畫(huà)效果。4． 與服務(wù)器異步交互AJAX框架可以簡(jiǎn)化代碼的編寫(xiě)，JQuery也提供了一整套AJAX相關(guān)的操作，大大方便了異步交互的開(kāi)發(fā)和使用。5． 簡(jiǎn)化常用的 JavaScript操作JQuery還提供了很多附加的功能來(lái)簡(jiǎn)化常用的 JavaScript操作，例如數(shù)組的操作、迭代運(yùn)算等 AJAX簡(jiǎn)介AJAX[4]的全稱(chēng)是Asynchronous JavaScript + XML ，AJAX不是一個(gè)技術(shù)，它實(shí)際上是幾種技術(shù)，每種技術(shù)都有其獨(dú)特這處，合在一起就成了一個(gè)功能強(qiáng)大的新技術(shù)。AJAX結(jié)合了Java技術(shù)、XML以及JavaScript等編程技術(shù)，可以讓開(kāi)發(fā)人員構(gòu)建基于Java技術(shù)的Web應(yīng)用，并打破了使用頁(yè)面重載的慣例。 AJAX是使用客戶端腳本與Web服務(wù)器交換數(shù)據(jù)的Web應(yīng)用開(kāi)發(fā)方法。這樣，Web頁(yè)面不用打斷交互流程進(jìn)行重新加載，就可以動(dòng)態(tài)地更新。使用AJAX，用戶可以創(chuàng)建接近本地桌面應(yīng)用的直接、高可用、更豐富、更動(dòng)態(tài)的Web用戶界面。異步這個(gè)詞是指AJAX應(yīng)用軟件與主機(jī)服務(wù)器進(jìn)行聯(lián)系的方式。如果使用舊模式，每當(dāng)用戶執(zhí)行某種操作、向服務(wù)器請(qǐng)求獲得新數(shù)據(jù)，Web瀏覽器就會(huì)更新當(dāng)前窗口。如果使用AJAX的異步模式，瀏覽器就不必等用戶請(qǐng)求操作，也不必更新整個(gè)窗口就可以顯示新獲取的數(shù)據(jù)。第三章 在線表單數(shù)據(jù)收集器系統(tǒng)表單模板設(shè)計(jì)用戶登陸注冊(cè)模塊流程圖如圖31所示。 圖31 登陸注冊(cè)模塊流程圖用戶訪問(wèn)網(wǎng)站，在進(jìn)行模板有關(guān)操作之前需要先登錄。若用戶已注冊(cè)則直接輸入用戶名和密碼登錄，即可查看個(gè)人模板信息并進(jìn)行所有系統(tǒng)功能操作。未注冊(cè)用戶需按照系統(tǒng)提示進(jìn)行注冊(cè)再登錄。用戶登陸成功之后，若需要發(fā)布新的模板，可通過(guò)選擇創(chuàng)建新的模板或從已有表單復(fù)制兩種方式來(lái)實(shí)現(xiàn)，進(jìn)入模板編輯創(chuàng)建頁(yè)面，完成模板創(chuàng)建。其中，創(chuàng)建新的模板會(huì)跳轉(zhuǎn)到空內(nèi)容的模板編輯頁(yè)面，而從已有表單復(fù)制方式會(huì)在已選用的表單內(nèi)容基礎(chǔ)上進(jìn)行編輯修改完成模板創(chuàng)建。模板創(chuàng)建完成后需要填寫(xiě)模板設(shè)置信息，最后發(fā)布模板，等待管理員認(rèn)證。用戶的模板發(fā)布流程圖如圖32所示。圖32 模板發(fā)布流程根據(jù)系統(tǒng)的流程實(shí)現(xiàn)以及功能分析，基于web的表單數(shù)據(jù)收集器模板中心的功能結(jié)構(gòu)如圖33所示。圖33 模板中心功能結(jié)構(gòu)用戶創(chuàng)建模板可以有兩種方式。一種是可以根據(jù)需要設(shè)計(jì)新的模板，這就需要用戶在創(chuàng)建之前有必要的構(gòu)思；另一種是從已有的表單復(fù)制，這種方式是在用戶之前已創(chuàng)建成功的表單基礎(chǔ)上編輯修改成表單模板，然后發(fā)布到模板庫(kù)。 表單字段歸納在分析了眾多在線表單制作網(wǎng)站表單制作特點(diǎn)之后，系統(tǒng)歸納整理出的表單字段共18種，設(shè)計(jì)原型如圖34所示。圖34 系統(tǒng)可用表單字段 1． 單行文字在數(shù)據(jù)采集時(shí)，單行文字字段應(yīng)用十分廣泛，一般用于用戶填寫(xiě)某一特定項(xiàng)文字信息，并且信息相對(duì)較短，如身份證號(hào)碼等。本系統(tǒng)單行文字字段樣式設(shè)有單行文字標(biāo)題、提示和單行文字輸入框，具體表單樣式設(shè)計(jì)如圖35所示。2． 多行文字多行文字相比于單行文字而言，用戶填寫(xiě)的信息量相對(duì)比較大，比如一段評(píng)論文字等。本系統(tǒng)多行文字字段樣式設(shè)有多行文字標(biāo)題、提示和多行文字輸入框，具體表單樣式設(shè)計(jì)如圖36所示。圖35 系統(tǒng)單行文字表單字段圖36 系統(tǒng)多行文字表單字段3． 單項(xiàng)選擇單項(xiàng)選擇是用戶表單最常用的字段之一，本系統(tǒng)提供的電子表單樣式允許用戶自由設(shè)置選項(xiàng)數(shù)量和不存在沖突的選項(xiàng)值，最大限度的滿足了用戶功能的需求，提高了系統(tǒng)靈活性。單項(xiàng)選擇字段樣式設(shè)有標(biāo)題、提示和選項(xiàng)列表，具體表單樣式設(shè)計(jì)如圖37所示。 圖37 系統(tǒng)單項(xiàng)選擇表單字段 4． 多項(xiàng)選擇多項(xiàng)選擇允許用戶自由設(shè)置選項(xiàng)數(shù)量和不存在沖突的選項(xiàng)值，并保持用戶多選的特性。多項(xiàng)選擇字段樣式設(shè)有標(biāo)題、提示和選項(xiàng)列表，具體表單樣式設(shè)計(jì)如圖38所示。 圖38 系統(tǒng)多項(xiàng)選擇表單字段 5． 圖片單選圖片單選允許用戶自由上傳一張圖片以完成特定功能，如上傳圖像。圖片單選字段樣式設(shè)有標(biāo)題、提示和圖片區(qū)域，具體表單樣式設(shè)計(jì)如圖39所示。 圖39 系統(tǒng)圖片單選表單字段6． 圖片多選圖片多選允許用戶自由上傳多張圖片以完成特定功能，如上傳連續(xù)圖冊(cè)。圖片多選字段樣式設(shè)有標(biāo)題、提示和圖片區(qū)域，具體表單樣式設(shè)計(jì)如圖310所示。 圖310 系統(tǒng)圖片多選表單字段 7． 數(shù)字?jǐn)?shù)字字段允許用戶輸入一連串?dāng)?shù)字，并最多支持16位數(shù)字。數(shù)字字段樣式設(shè)有標(biāo)題、提示和數(shù)字輸入框，具體表單樣式設(shè)計(jì)如圖311所示。 圖311 系統(tǒng)數(shù)字表單字段8． 郵箱郵箱字段允許用戶輸入郵箱地址，并保證郵箱基本格式。郵箱字段樣式設(shè)有標(biāo)題、提示和郵箱地址輸入框，具體表單樣式設(shè)計(jì)如圖312所示。圖312 系統(tǒng)郵箱表單字段9． 網(wǎng)址網(wǎng)址字段允許用戶輸入U(xiǎn)RL地址。網(wǎng)址字段樣式設(shè)有標(biāo)題、提示和網(wǎng)址輸入框，具體表單樣式設(shè)計(jì)如圖313所示。圖313 系統(tǒng)網(wǎng)址表單字段10． 地址地址字段允許用戶輸入地址，并通過(guò)下拉列表選擇省市。地址字段樣式設(shè)有標(biāo)題、提示和地址輸入框，具體表單樣式設(shè)計(jì)如圖314所示。11． 地理位置地理位置允許用戶利用網(wǎng)絡(luò)動(dòng)態(tài)獲取當(dāng)前地理位置信息。地理位置字段樣式設(shè)有標(biāo)題、提示和地址輸入框，具體表單樣式設(shè)計(jì)如圖315所示。圖314 系統(tǒng)地址表單字段圖315 系統(tǒng)地理位置表單字段12． 電話電話字段允許用戶填寫(xiě)固定電話號(hào)碼。電話字段樣式設(shè)有標(biāo)題、提示和號(hào)碼輸入框，具體表單樣式設(shè)計(jì)如圖316所示。圖316 系統(tǒng)電話表單字段13． 手機(jī)手機(jī)字段允許用戶填寫(xiě)手機(jī)號(hào)碼。手機(jī)字段樣式設(shè)有標(biāo)題、提示和號(hào)碼輸入框，具體表單樣式設(shè)計(jì)如圖317所示。 圖317 系統(tǒng)手機(jī)表單字段14． 日期日期字段允許用戶通過(guò)日期下拉框選擇填寫(xiě)日期信息。日期字段樣式設(shè)有標(biāo)題、提示和日期信息框，具體表單樣式設(shè)計(jì)如圖318所示。圖318 系統(tǒng)日期表單字段15． 時(shí)間時(shí)間字段允許用戶通過(guò)時(shí)間下拉框選擇填寫(xiě)時(shí)間信息。時(shí)間字段樣式設(shè)有標(biāo)題、提示和時(shí)間信息框，具體表單樣式設(shè)計(jì)如圖319所示。圖319 系統(tǒng)時(shí)間表單字段16． 下拉框下拉框字段允許用戶自行設(shè)定下拉列表項(xiàng)。下拉框字段樣式設(shè)有標(biāo)題、提示和下拉列表，具體表單樣式設(shè)計(jì)如圖320所示。圖320 系統(tǒng)下拉框表單字段17． 評(píng)分評(píng)分字段允許用戶自行設(shè)定評(píng)分風(fēng)格和滿分?jǐn)?shù)量。評(píng)分字段樣式設(shè)有標(biāo)題、提示和評(píng)分列表，具體表單樣式設(shè)計(jì)如圖321所示。圖321 系統(tǒng)評(píng)分表單字段18． 分節(jié)分節(jié)字段允許用戶將表單分模塊隔開(kāi)。分節(jié)字段具體表單樣式設(shè)計(jì)如圖322所示。 圖322 系統(tǒng)分節(jié)表單字段系統(tǒng)提供了18種可用字段，并通過(guò)不同功能字段組合的方式創(chuàng)建表單，減小了用戶創(chuàng)建表單的復(fù)雜度，提高了創(chuàng)建效率，改善了用戶體驗(yàn)。 創(chuàng)建新的模板用戶可以根據(jù)需要設(shè)計(jì)新的模板，進(jìn)入空內(nèi)容的模板編輯頁(yè)面。系統(tǒng)表單模板設(shè)計(jì)方式如圖323所示。圖323 系統(tǒng)表單模板創(chuàng)建方式系統(tǒng)還實(shí)現(xiàn)了根據(jù)已有表單來(lái)創(chuàng)建模板的功能，用戶可通過(guò)系統(tǒng)彈出的表單列表框選用目標(biāo)表單，如圖324所示。圖324 系統(tǒng)表單列表彈出框圖325 系統(tǒng)表單模板創(chuàng)建頁(yè)面用戶選擇目標(biāo)表單項(xiàng)，系統(tǒng)跳轉(zhuǎn)到模板編輯頁(yè)面，此頁(yè)面包含了表單原有字段信息，用戶可以在此基礎(chǔ)上編輯修改，編輯頁(yè)面如圖325所示。 選用模板創(chuàng)建表單功能分析系統(tǒng)按照表單模板所實(shí)現(xiàn)的功能，以及表單內(nèi)容所屬行業(yè)不同等進(jìn)行分類(lèi)，為用戶提供結(jié)構(gòu)清晰的模板分類(lèi)結(jié)構(gòu)，方便用戶根據(jù)模板屬性按需查找所需的表單模板。模板分類(lèi)目錄如圖326所示。 圖326 系統(tǒng)模板分類(lèi)模板分類(lèi)結(jié)構(gòu)如圖327所示。 圖327 系統(tǒng)模板分類(lèi)目錄 系統(tǒng)需求階段通過(guò)分析其他在線表單網(wǎng)站，并通過(guò)網(wǎng)絡(luò)調(diào)查搜取素材，歸納整理覆蓋不同行業(yè)、不同功能需求的表單原型，提取出許多使用頻繁的基本表單模板并錄入系統(tǒng)模板庫(kù)，如用戶信息調(diào)查表，客戶登記表，通訊錄等，供用戶參考?？蛻魸M意度調(diào)查表如圖328所示。 圖328 客戶滿意度調(diào)查表 用戶通過(guò)瀏覽與需求相關(guān)的表單模板，并在找到合適的模板之后選用，在此模板基礎(chǔ)上直接編輯修改成滿足自己需求的表單，簡(jiǎn)化表單創(chuàng)建過(guò)程，提高效率及改善用戶體驗(yàn)。選用模板后的表單編輯頁(yè)面如圖329所示。 圖329 用戶選用客戶滿意度調(diào)查表后的編輯頁(yè)面系統(tǒng)賦予了用戶創(chuàng)建表單模板并發(fā)布的權(quán)限，但也需要對(duì)其操作進(jìn)行控制，否則可能導(dǎo)致惡意創(chuàng)建。為此，系統(tǒng)設(shè)立管理員并通過(guò)管理員實(shí)現(xiàn)對(duì)用戶發(fā)布的表單模板依據(jù)一定的審核規(guī)則進(jìn)行認(rèn)證，認(rèn)證通過(guò)的模板會(huì)錄入系統(tǒng)模板庫(kù)，可供其他用戶訪問(wèn)。對(duì)于認(rèn)證未通過(guò)的表單模板，管理員會(huì)批回提醒創(chuàng)建者修改完善。通過(guò)這一層審核，提高了系統(tǒng)模板庫(kù)的安全度。具體審核規(guī)則包括：模板內(nèi)容是否合理、表單是否完善、是否具有可用性、是否適合其他用戶重用等。管理員登陸成功后，進(jìn)入模板管理頁(yè)面，如圖330所示。圖330 管理員模板管理頁(yè)面圖331 系統(tǒng)根據(jù)認(rèn)證狀態(tài)不同的分類(lèi)管理員通過(guò)對(duì)模板列表中的模板項(xiàng)進(jìn)行操作，設(shè)定認(rèn)證狀態(tài)，完成模板認(rèn)證。系統(tǒng)前臺(tái)模板列表根據(jù)表單模板的認(rèn)證狀態(tài)分為“官方認(rèn)證”和“沙灘”兩部分，如圖331所示。通過(guò)系統(tǒng)管理員的認(rèn)證，用戶上傳的模板會(huì)發(fā)布到系統(tǒng)表單模板庫(kù)供別的用戶重用。管理員后臺(tái)管理功能的引入提高了系統(tǒng)的安全性，對(duì)系統(tǒng)的運(yùn)行與維護(hù)具有重要意義。 第四章 在線表單數(shù)據(jù)收集器表單模板功能實(shí)現(xiàn) 用戶登陸模塊此模塊體現(xiàn)用戶登錄狀態(tài)，判斷用戶是否登錄，未登陸時(shí)提供用戶注冊(cè)、登陸、找回密碼功能，登陸后顯示用戶個(gè)人信息，為用戶提供查看個(gè)人模板信息、創(chuàng)建表單模板、個(gè)人中心等功能。用戶訪問(wèn)模板中心頁(yè)面，系統(tǒng)默認(rèn)顯示“廣場(chǎng)”目錄下的“熱門(mén)”子目錄頁(yè)面。如果用戶未登錄，頁(yè)面顯示出登錄狀態(tài)信息，并且不顯示“發(fā)布模板”按鈕，用戶無(wú)法完成發(fā)布模板等功能操作。只有用戶登陸成功之后才可以執(zhí)行發(fā)布模板等操作。用戶點(diǎn)擊“登陸”按鈕，觸發(fā)該按鈕綁定的JQuery的“click”事件，在“click”處理函數(shù)中通過(guò)遮罩層覆蓋當(dāng)前頁(yè)面，并在當(dāng)前頁(yè)面上層彈出登陸框，遮罩層作用是使頁(yè)面其它元素的事件不可用。通過(guò)使用彈出模態(tài)登陸框形式，避免了頁(yè)面的頻繁跳轉(zhuǎn)，使用戶專(zhuān)注于當(dāng)前頁(yè)面內(nèi)容。如圖41所示。圖41 系統(tǒng)的登陸彈出框頁(yè)面登陸彈出框包括“用戶名”和“密碼”兩個(gè)輸入框，其中本系統(tǒng)用戶名為郵箱格式，為提高用戶輸入效率，通過(guò)對(duì)“用戶名”輸入框?qū)崿F(xiàn)了自動(dòng)提示功能，如圖42所示。圖42 登陸彈出框的輸入框提示頁(yè)面“用戶名”輸入框自動(dòng)提示功能JQuery代碼實(shí)現(xiàn)如下。//自動(dòng)提示功能var _list=[39。@39。,39。@39。,39。@39。,39。@39。]。$(39。username39。).autoplete({ source:function(req, resp) { var list=[]。 if (/\w+([+.]w+)*@/.test($(39。username39。).val())) { $(39。username39。).autoplete(39。close39。)。 } else { for(var index=0。index。index++) { ($(39。username39。).val()+_list[index])。 } } resp(list)。 }})。輸入框的自動(dòng)提示功能通過(guò)綁定JQuery的“blur”事件，在用戶輸入內(nèi)容時(shí)，檢測(cè)輸入內(nèi)容，內(nèi)容不為空時(shí)顯示下拉列表框，列表框中自動(dòng)匹配幾種常用郵箱的后綴格式，如@，@。此外，輸入框還添加了js前端驗(yàn)證，若用戶輸入的用戶名格式不正確，提示出錯(cuò)信息。如圖43所示。圖43 登陸彈出框的js驗(yàn)證出錯(cuò)提示頁(yè)面js前端驗(yàn)證代碼實(shí)現(xiàn)如下。function changeEmailMsgBlur() { if (()!=39。39。) { if(/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/.test(())) { $(39。._msg39。).css(39。background39。,39。url(image/) top left norepeat39。).text(39。39。)。 } else { $(39。._msg39。).css(39。background39。,39。none39。).text(39。* 郵箱格式錯(cuò)誤39。)。