基于JQuery多關(guān)鍵字組合無刷新分頁技術(shù)的實現(xiàn)

孫仁鵬+劉富國

摘 要：有刷新分頁需要回傳整個頁面，用戶體驗效果差。原生AJAX實現(xiàn)無刷新分頁，難度高，代碼復雜，且有瀏覽器兼容和不便解析JSON數(shù)據(jù)問題。為了解決不足，提出使用JQuery實現(xiàn)無刷新分頁。首先分析了有刷新和無刷新的工作原理，然后結(jié)合多關(guān)鍵字組合搜索，闡述分頁的核心實現(xiàn)思路，同時利用JSON提升網(wǎng)絡(luò)傳輸效率和簡化數(shù)據(jù)解析，利用數(shù)據(jù)庫端物理分頁提高分頁性能。實踐表明，研究具有較好的實用價值。

關(guān)鍵詞：JQuery；多關(guān)鍵字；無刷新；物理分頁；JSON

中圖分類號：TP311 文獻標識碼：A

Abstract：With refreshing paging techniques，the entire page needs to be posted back and the user experience is poor.Native AJAX implements non-refreshing paging with many problems，like high difficulty，complexity code，poor browser compatibility and inconvenience for parsing JSON data.In order to solve the problems，the paper proposes to achieve non-refreshing paging through JQuery.The operating principles of refreshing and non-refreshing are analyzed in the first place，and then the core implementation thoughts of paging are explained with the multi-keyword combination search.By adopting JSON，the network transmission efficiency is enhanced and the data analysis is simplified.The paging performance is improved through physical paging on the database.Practice has proved the high practical value of the scheme.

Keywords：JQuery；multi-keyword；non-refreshing；physical paging；JSON

1 引言（Introduction）

數(shù)據(jù)分頁展示，是web編程常用的一項技術(shù)。有刷新分頁會重新加載整個頁面，用戶體驗較差；原生AJAX實現(xiàn)無刷新分頁，解決了用戶體驗差的問題，但是存在代碼量大、實現(xiàn)難度高、瀏覽器兼容和數(shù)據(jù)解析不便等問題[1-3]。在實際的企業(yè)應(yīng)用中，還往往需要結(jié)合多關(guān)鍵字組合查詢，利用json/xml等數(shù)據(jù)格式進行數(shù)據(jù)傳輸。所以，研究JQuery的AJAX分頁實現(xiàn)，提高用戶體驗和提升分頁性能，簡化代碼，顯得尤為必要。

2 原理介紹（Principle introduction）

2.1 有刷新分頁

用戶每次點擊上一頁或下一頁向web服務(wù)器發(fā)送http請求時，服務(wù)器接收處理后都會回傳整個頁面數(shù)據(jù)。這種處理模式浪費了網(wǎng)絡(luò)帶寬，因為在請求前后兩個頁面中的大部分html代碼往往是相同的。并且查詢關(guān)鍵字、頁面總數(shù)、當前頁、返回的數(shù)據(jù)都將放置在session或request內(nèi)置對象中，增加服務(wù)器內(nèi)存壓力。

2.2 無刷新分頁

當用戶點擊上一頁或下一頁時，使用客戶端對象XMLHttpRequest發(fā)送異步請求，服務(wù)器響應(yīng)之后再把局部變化的數(shù)據(jù)返回給客戶端。因為請求和響應(yīng)是異步的，因此服務(wù)器無須回傳整個頁面數(shù)據(jù)，能在不刷新頁面的前提下維護數(shù)據(jù)。這樣，查詢關(guān)鍵字、頁面總數(shù)和當前頁就無須放置在session中，只需放在當前頁JQuery代碼中，同時請求和響應(yīng)的數(shù)據(jù)用json格式封裝，減少了服務(wù)器內(nèi)存的占用和減輕了網(wǎng)絡(luò)負荷[4]。

2.3 JQuery無刷新分頁

原生AJAX的無刷新是使用復雜且難以理解的JavaScript來實現(xiàn)異步，不同的瀏覽器對AJAX的實現(xiàn)也不相同，而JQuery只需要一行簡單的代碼，就可以實現(xiàn)AJAX功能。JQuery能夠使用Http Get和Http Post從遠程服務(wù)器上請求文本、HTML、XML或JSON，同時能夠方便地把這些外部數(shù)據(jù)直接載入網(wǎng)頁的被選元素中。JSON比XML更小、更快，更易解析，原生Ajax不支持。在JQuery無刷新技術(shù)的基礎(chǔ)上，運用多關(guān)鍵字組合來增強查詢能力、實現(xiàn)功能更為強大的“多關(guān)鍵字組合無刷新分頁技術(shù)”[5]。

3 代碼實現(xiàn)（Code implementation）

3.1 多關(guān)鍵字組合

采用sql動態(tài)拼接的方式實現(xiàn)。WHERE 1=1是為了方便在sql語句后面持續(xù)的添加條件，“！"".equals（sex）”是sql拼接查詢條件的判斷，頁面?zhèn)鬟f過來的關(guān)鍵字值為空川則在查詢條件中就拼接不到該關(guān)鍵字，關(guān)鍵字值都為空串則查詢?nèi)縖6，7]。

//sql動態(tài)拼接關(guān)鍵代碼

String sql="SELECT username，sex，grade FROM`user`WHERE 1=1"；

if （！"".equals（sex））sql+=" AND sex="+sex；{……}

sql+="LIMIT"+（pageNum-1）*10+"，10"；endprint

3.2 根據(jù)多關(guān)鍵字組合作為條件，JQuery異步加載查詢

總頁數(shù)

根據(jù)多條件關(guān)鍵字，JQuery異步調(diào)用web端組件查詢總頁數(shù)，異步回調(diào)來接收并解析返回的數(shù)據(jù)，然后清空舊頁碼顯示，并將新的總頁數(shù)通過id載入網(wǎng)頁的被選元素中。異步調(diào)用的參數(shù)：“type”表示get或post提交方式，“url”表示提交的服務(wù)器端請求的地址，“data”表示攜帶的參數(shù)，“dataType”表示服務(wù)器返回的數(shù)據(jù)類型，“success”表示請求成功后的回調(diào)函數(shù)，“error”表示請求失敗后的回調(diào)參數(shù)[8]。

//輸入多關(guān)鍵字條件，點擊查詢

$（"#query"）.click（function（）{

username=$（"#username"）.val（）；//獲取姓名值

sex=$（"#sex"）.val（）；//獲取性別值

grade=$（"#grade"）.val（）；//獲取班級值

getQuery（username，sex，grade，1）；//使用多關(guān)鍵字查詢第一頁內(nèi)容

$.ajax（{

type："post"，//post方式提交

url："/QueryServlet"，//url請求路徑

data： "action=getPageSum&username="+username+"&sex="+sex+"&grade="+grade，//調(diào)用QueryServlet中的getPageSum方法，并把關(guān)鍵字作為參數(shù)提交，最終獲取頁面的總頁數(shù)

dateType："text"，//返回數(shù)據(jù)為text格式

success：function（data）{

pageNum=data.toString（）；//得到頁面的頁數(shù)

$（"#pageNum"）.html（""）；//清空前端123…頁碼顯示

for （var i=1； i<=pageNum； i++）//添加123…頁的頁碼在前端

$（"#pageNum"）.append（""+i+""）；

}

}）；

}）；

3.3 分頁的實現(xiàn)思路

JQuery對象注冊查詢點擊事件，事件發(fā)生時，異步調(diào)用服務(wù)器端組件，傳遞json格式參數(shù)，包括查詢的關(guān)鍵字、哪一頁。服務(wù)器端組件執(zhí)行后一般返回json格式數(shù)據(jù)，在JQuery的回調(diào)方法中獲取該數(shù)據(jù)后，首先清除頁面原來顯示的數(shù)據(jù)和對應(yīng)的元素，然后解析該數(shù)據(jù)，并重新附加到新的頁面元素中。物理分頁每次只去查詢當前頁的數(shù)據(jù)，減輕了服務(wù)器壓力，并發(fā)性高。不同數(shù)據(jù)庫服務(wù)器的分頁語句有不同的表達，MySql的sql實現(xiàn)為“ SELECT*FROM table LIMIT（pageNum-1）*？，？”，其中兩個？占位符都表示一頁顯示的行數(shù)[9]。

3.3.1 前臺展示邏輯

currentPage是當前頁，如果currentPage是最后一頁，下一頁就失效；如果currentPage是第一頁，上一頁就會失效，currentPage保存在js中。pageIndex為跳轉(zhuǎn)到某頁函數(shù)，每當進行頁面跳轉(zhuǎn)，當前頁都轉(zhuǎn)變?yōu)樘D(zhuǎn)的某頁。

function pageIndex（username，sex，grade，page）{//頁面跳轉(zhuǎn)

currentPage=page；//當前頁都轉(zhuǎn)變?yōu)樘D(zhuǎn)的某頁

getQuery（username，sex，grade，page）；//獲取某頁的數(shù)據(jù)，并且在前端顯示

}

$（"#upPage"）.click（function（）{//上一頁

if （currentPage！=1）//判斷是否為第一頁

pageIndex（username，sex，grade，--currentPage）；//不為第一頁則跳轉(zhuǎn)

}）；

$（"#downPage"）.click（function（）{//下一頁

if （currentPage！=pageNum）//判斷是否為末頁（頁面總數(shù)）

pageIndex（username，sex，grade，++currentPage）；//不為末頁則跳轉(zhuǎn)

}）；

3.3.2 JQuery異步調(diào)服務(wù)器端組件和解析返回JSON數(shù)據(jù)

根據(jù)多關(guān)鍵字和頁碼異步調(diào)用服務(wù)器端組件，返回json格式的某頁數(shù)據(jù)。回調(diào)方法success獲取返回的json數(shù)據(jù)，首先清除前端頁面舊數(shù)據(jù)，然后解析新數(shù)據(jù)，并附加到前端頁面元素中。解析json格式的集合數(shù)據(jù)一般采用遍歷的方式，for（var i in data）{}進行遍歷，data[i]表示下標為i的對象，data[i].屬性名表示屬性值。由于是異步請求，局部刷新，所以分頁實現(xiàn)沒有頁面刷新 。

//查詢某頁數(shù)據(jù)，并返回前端顯示

function getQuery（username，sex，grade，pageNum） {

$.ajax（{

type："post"，//post請求方式

url："/QueryServlet"，//url請求路徑

data： "action=query&username="+username+"&sex="+sex+"&grade="+grade+"&pageNum="+pageNum，//調(diào)用QueryServlet中的query方法，并把關(guān)鍵字和頁碼作為參數(shù)提交，最終獲取某頁的json數(shù)據(jù)endprint

dataType："json"，//返回值類型為JSON

success： function（data）{

$（"#tableAddTr"）.html（""）；//清空前端頁面的數(shù)據(jù)

for（var i in data）{//遍歷json數(shù)據(jù)

$（"#tableAddTr"）.append（""+data[i].username+""+sex+""+data[i].grade+""）；//給前端頁面添加新的數(shù)據(jù)

}

}

}）；

}

3.3.3 轉(zhuǎn)換返回的集合對象為JSON格式數(shù)據(jù)

在被調(diào)用的web端組件中把返回的數(shù)據(jù)集合對象轉(zhuǎn)換成json格式返回，供JQuery接收和解析。

JSONArray jsonArray=JSONArray.fromObject（users）；//users集合轉(zhuǎn)換json格式

out.print（jsonArray）；//返回json數(shù)據(jù)，success回調(diào)函數(shù)接收

4 結(jié)論（Conclusion）

本研究提出了基于JQuery實現(xiàn)無刷新分頁，實現(xiàn)了快速便捷開發(fā)，優(yōu)化用戶體驗；結(jié)合多關(guān)鍵字組合，增強搜索功能；采用JSON格式封裝和回傳數(shù)據(jù)，提升網(wǎng)絡(luò)傳輸效率，簡化數(shù)據(jù)解析，以及物理分頁技術(shù)，提高分頁性能。基于JQuery多關(guān)鍵字組合無刷新分頁技術(shù)的成果已經(jīng)在多個企業(yè)項目中良好應(yīng)用，具有一定參考價值。

參考文獻（References）

[1] 張滬寅，屈乾松，胡瑞蕓.基于JSON的數(shù)據(jù)交換模型[J].計算機工程與設(shè)計，2015（12）：3380-3384.

[2] 馬力.JavaScript與Ajax之間的互通關(guān)系——評《JavaScript語言與Ajax應(yīng)用》[J].國家教育行政學院學報，2015（08）：97.

[3] 鄭迪文，等.基于AJAX的Web應(yīng)用構(gòu)件組裝技術(shù)及工具[J].計算機科學，2014（11）：152-156.

[4] 隆功倫.淺析網(wǎng)頁無刷新技術(shù)[J].電腦知識與技術(shù)，2014（11）：

2562-2564.

[5] 段昌盛.基于AJAX技術(shù)實現(xiàn)無刷新分頁[J].電子技術(shù)與軟件工程，2015（02）：19-20.

[6] 李華，等.多條件文獻通用查詢模塊的設(shè)計與實現(xiàn)[J].電腦編程技巧與維護，2015（10）：69-71.

[7] 周千明，王巧俠，朱欣娟.通用動態(tài)多條件查詢方法的研究與實現(xiàn)[J].電腦知識與技術(shù)，2011（04）：738-740.

[8] 丁華，陳輝.基于WEB的上機考核系統(tǒng)中JQuery和Ajax技術(shù)的應(yīng)用[J].電子設(shè)計工程，2016（15）：16-19.

[9] 王洪九.運用jQuery和ajax實現(xiàn)數(shù)據(jù)庫數(shù)據(jù)的提取和分頁[J].信息與電腦（理論版），2012（09）：97-98.

[10] 屈展，李嬋.JSON在Ajax數(shù)據(jù)交換中的應(yīng)用研究[J].西安石油大學學報（自然科學版），2011（01）：95-98.

作者簡介：

孫仁鵬（1972-），男，碩士，副教授.研究領(lǐng)域：計算機應(yīng)用技術(shù)，計算機教育.

劉富國（1996-），男，大專生.研究領(lǐng)域：Java web開發(fā).endprint