【鬥醫】【18】Web應用開發20天

本文通過擷取首頁内容來講解web頁面拖拽擷取目前頁資料，功能類似在google檢視圖檔，這裡面涉及如下五個步驟：

（1）頁面首次加載時讀取第一頁資料

（2）觸發滾動條拖拽動作

（3）ajax異步讀取下一頁資料

（4）服務端把資料封裝為json傳回

（5）把頁面資料通過dom元素繪制在頁面上

1、頁面首次加載時會加載main.js檔案。在此檔案中增加current_item_index變量，用于辨別目前話題的索引值；增加方法getpagecontent()，用于頁面加載時調用，擷取第一頁資料。

<code> </code><code>* 按時間降序排列後辨別頁面最後一條記錄的索引值</code>

<code>var</code> <code>current_item_index = 0;</code>

<code>$(document).ready(</code><code>function</code><code>()</code>

<code> </code><code>// 擷取首頁内容</code>

<code> </code><code>getpagecontent(current_item_index);</code>

<code>function</code> <code>getpagecontent(currentindex)</code>

<code> </code><code>var</code> <code>data = {</code><code>"currentindex"</code><code>: currentindex};</code>

<code> </code><code>asyncrequest(</code><code>"maincontent.data"</code><code>, data, </code><code>function</code><code>(result)</code>

2、觸發滾動條拖拽動作。在main.js加載時對window綁定scroll事件

<code> </code><code>getbreifuserinfo();</code>

<code> </code><code>// 監聽滾動條拖拽事件</code>

<code> </code><code>bindscrollevent();</code>

【備注】：由于涉及到不斷地下拉滾動條，是以需要增加一個辨別isqueryflag，若正在查找資料時則不再響應下拉事件

/**

* 是否正在查詢資料辨別

var isqueryflag = false;

3、ajax異步讀取下一頁資料。實作bindscrollevent()方法：

<code> </code><code>* 綁定滾動條拖拽事件</code>

<code>function</code> <code>bindscrollevent()</code>

<code> </code><code>var</code> <code>scrollbardistance = 0; </code><code>// 滾動條的目前位置</code>

<code> </code><code>var</code> <code>documentheight = 0; </code><code>// 文檔高度</code>

<code> </code><code>var</code> <code>windowheight = $(window).height(); </code><code>// 目前視窗高度</code>

<code> </code><code>$(window).scroll(</code><code>function</code><code>(){</code>

<code> </code><code>scrollbardistance = $(document).scrolltop();</code>

<code> </code><code>documentheight = $(document).height();</code>

<code> </code><code>if</code><code>(scrollbardistance + windowheight >= documentheight)</code>

<code> </code><code>if</code><code>(isqueryflag === </code><code>true</code><code>)</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>// 擷取頁面内容</code>

<code> </code><code>getpagecontent(current_item_index);</code>

4、服務端把資料封裝為json傳回

（1）修改配置檔案system-data.xml，把拖拽動作方法與服務端讀取資料的業務處理邏輯關聯起來

<code><</code><code>business</code> <code>name</code><code>=</code><code>"maincontent"</code> <code>business-class</code><code>=</code><code>"com.medical.server.data.maindataaction"</code> <code>/></code>

（2）定義服務端讀取資料的業務處理類com.medical.server.data.maindataaction

<code>@override</code>

<code>public</code> <code>string execute() </code><code>throws</code> <code>frameexception</code>

<code> </code><code>// 擷取目前記錄索引值</code>

<code> </code><code>string currentindex = getparameter(</code><code>"currentindex"</code><code>);</code>

<code> </code><code>if</code> <code>(frameutil.isempty(currentindex))</code>

<code> </code><code>topicresultbean result = </code><code>new</code> <code>topicresultbean();</code>

<code> </code><code>result.seterrorcode(frameerrorcode.request_param_error);</code>

<code> </code><code>return</code> <code>gson.tojson(result);</code>

<code> </code><code>// 從資料庫中讀取資料</code>

<code> </code><code>int</code> <code>index = integer.valueof(currentindex);</code>

<code> </code><code>list<topicdao> topiclist = topicutil.gettopiclist(index);</code>

<code> </code><code>if</code> <code>(frameutil.isempty(topiclist))</code>

<code> </code><code>result.seterrorcode(frameerrorcode.request_content_empty);</code>

<code> </code><code>// 組裝界面所需要内容</code>

<code> </code><code>list<topicbean> topicbeanlist = </code><code>new</code> <code>arraylist<topicbean>();</code>

<code> </code><code>for</code> <code>(topicdao element : topiclist)</code>

<code> </code><code>userdao author = userutil.getuserbyname(element.getuserid());</code>

<code> </code><code>topicbean bean = </code><code>new</code> <code>topicbean();</code>

<code> </code><code>bean.setusername(author.getuserid());</code>

<code> </code><code>bean.setusericon(author.geticonpath());</code>

<code> </code><code>bean.setnickname(author.getusersign());</code>

<code> </code><code>bean.settopicid(element.gettopicid());</code>

<code> </code><code>bean.settopictitle(element.gettopictitle());</code>

<code> </code><code>bean.setcommentnum(commentutil.getcommentnum(element.gettopicid()));</code>

<code> </code><code>bean.settopicsummary(gettopicsummary(element.getprescript()));</code>

<code> </code><code>bean.settopictime(element.gettopictime());</code>

<code> </code><code>topicbeanlist.add(bean);</code>

<code> </code><code>// 傳回json結果</code>

<code> </code><code>topicresultbean result = </code><code>new</code> <code>topicresultbean();</code>

<code> </code><code>result.seterrorcode(</code><code>0</code><code>);</code>

<code> </code><code>result.settopiclist(topicbeanlist);</code>

<code> </code><code>return</code> <code>gson.tojson(result);</code>

【備注】：為了使内容簡潔，中間省略了一些處理函數

5、把頁面資料通過dom元素繪制在頁面上

（1）異步讀取資料，并對資料合法性進行判斷

<code>// 設定查詢辨別</code>

<code>isqueryflag = </code><code>true</code><code>;</code>

<code>asyncrequest(</code><code>"maincontent.data"</code><code>, data, </code><code>function</code><code>(result)</code>

<code> </code><code>// 若讀取資料未成功直接傳回</code>

<code> </code><code>var</code> <code>resultjson = eval(result);</code>

<code> </code><code>if</code><code>(resultjson.errorcode != 0)</code>

<code> </code><code>return</code><code>;</code>

<code> </code><code>var</code> <code>topiclist = resultjson.topiclist;</code>

<code> </code><code>if</code><code>(!topiclist){</code>

<code> </code><code>// 重置資料目前索引值</code>

<code> </code><code>current_item_index = current_item_index + topiclist.length;</code>

<code> </code><code>// 操縱dom把資料繪制到頁面上</code>

<code> </code><code>$.each(topiclist, </code><code>function</code><code>(i, item){</code>

<code> </code><code>appenddata(i, item);</code>

<code> </code><code>// 重置查詢辨別</code>

<code> </code><code>isqueryflag = </code><code>false</code><code>;</code>

（2）dom元素繪制的實作

<code> </code><code>* 操縱dom把資料繪制到頁面上</code>

<code>function</code> <code>appenddata(i, item)</code>

<code> </code><code>var</code> <code>topicitem = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item"</code><code>);</code>

<code> </code><code>topicitem.appendto($(</code><code>"#main_content_dynamic_id"</code><code>));</code>

<code> </code><code>// 添加使用者頭像 </code>

<code> </code><code>var</code> <code>usericon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_icon"</code><code>);</code>

<code> </code><code>usericon.appendto(topicitem);</code>

<code> </code><code>// 添加挑戰内容</code>

<code> </code><code>var</code> <code>content = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_content"</code><code>);</code>

<code> </code><code>content.appendto(topicitem);</code>

<code> </code><code>// >>>>>>設定挑戰話題标題 </code>

<code> </code><code>var</code> <code>topwrapper = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_wrapper"</code><code>);</code>

<code> </code><code>var</code> <code>topictitle = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_title"</code><code>);</code>

<code> </code><code>var</code> <code>titlelink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>).text(item.topictitle);</code>

<code> </code><code>titlelink.appendto(topictitle);</code>

<code> </code><code>topictitle.appendto(topwrapper);</code>

<code> </code><code>topwrapper.appendto(content);</code>

<code> </code><code>// >>>>>>設定挑戰話題标題</code>

<code> </code><code>var</code> <code>topictime = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_time"</code><code>).text(item.topictime);</code>

<code> </code><code>topictime.appendto(topwrapper);</code>

<code> </code><code>// >>>>>>設定使用者名稱和昵稱</code>

<code> </code><code>var</code> <code>centerwrapper = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_wrapper"</code><code>);</code>

<code> </code><code>var</code> <code>username = $(</code><code>"<label />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_author"</code><code>).text(item.username + </code><code>"，"</code><code>);</code>

<code> </code><code>var</code> <code>usernick = $(</code><code>"<label />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_nickname"</code><code>).text(item.nickname);</code>

<code> </code><code>username.appendto(centerwrapper);</code>

<code> </code><code>usernick.appendto(centerwrapper);</code>

<code> </code><code>centerwrapper.appendto(content);</code>

<code> </code><code>// >>>>>>設定話題摘要資訊</code>

<code> </code><code>var</code> <code>middlewrapper = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_wrapper"</code><code>);</code>

<code> </code><code>var</code> <code>topicsummary = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_substance"</code><code>).html(item.topicsummary);</code>

<code> </code><code>topicsummary.appendto(middlewrapper);</code>

<code> </code><code>middlewrapper.appendto(content);</code>

<code> </code><code>// >>>>>>設定話題附屬資訊</code>

<code> </code><code>var</code> <code>bottomwrapper = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_wrapper"</code><code>);</code>

<code> </code><code>var</code> <code>topicattach = $(</code><code>"<div />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_attach"</code><code>);</code>

<code> </code><code>topicattach.appendto(bottomwrapper);</code>

<code> </code><code>bottomwrapper.appendto(content);</code>

<code> </code><code>// >>>>>>>>>>>>設定話題關注資訊</code>

<code> </code><code>var</code> <code>followlink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>);</code>

<code> </code><code>var</code> <code>followicon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_attention"</code><code>);</code>

<code> </code><code>followicon.appendto(followlink);</code>

<code> </code><code>followlink.appendto(topicattach);</code>

<code> </code><code>followlink.text(</code><code>"關注"</code><code>);</code>

<code> </code><code>var</code> <code>commentlink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>);</code>

<code> </code><code>var</code> <code>commenticon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_discuss"</code><code>);</code>

<code> </code><code>commenticon.appendto(commentlink);</code>

<code> </code><code>commentlink.appendto(topicattach);</code>

<code> </code><code>commentlink.text(item.commentnum + </code><code>"人評論"</code><code>);</code>

<code> </code><code>// >>>>>>>>>>>>設定話題分享資訊</code>

<code> </code><code>var</code> <code>sharelink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>);</code>

<code> </code><code>var</code> <code>shareicon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_share"</code><code>);</code>

<code> </code><code>shareicon.appendto(sharelink);</code>

<code> </code><code>sharelink.appendto(topicattach);</code>

<code> </code><code>sharelink.text(</code><code>"分享"</code><code>);</code>

<code> </code><code>// >>>>>>>>>>>>設定話題收藏資訊</code>

<code> </code><code>var</code> <code>favoritelink = $(</code><code>"<a />"</code><code>).attr(</code><code>"href"</code><code>, </code><code>"#"</code><code>);</code>

<code> </code><code>var</code> <code>favoriteicon = $(</code><code>"<i />"</code><code>).attr(</code><code>"class"</code><code>, </code><code>"main_item_collection"</code><code>);</code>

<code> </code><code>favoriteicon.appendto(favoritelink);</code>

<code> </code><code>favoritelink.appendto(topicattach);</code>

<code> </code><code>favoritelink.text(</code><code>"收藏"</code><code>);</code>

6、效果示範

（1）向資料表topictable中增加兩條記錄

（2）在浏覽器輸入http://localhost:8080/medical，效果如下：

【備注】：

【鬥醫】【18】Web應用開發20天

2、這裡的拖拽事件沒有考慮視窗的縮小與放大情況

3、為了簡潔起見，沒有增加傳回頂端功能

【鬥醫】【18】Web應用開發20天

繼續閱讀

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

vue-cli簡介（中文翻譯）

Ajax發送和擷取json資料到Spring mvc 1.spring mvc後端2.web前段

layui多任務上傳添加進度條

JSONObject包導入異常 java.lang.NoClassDefFoundErrorweb項目的導入包的問題