通過Ajax請(qǐng)求動(dòng)態(tài)填充頁面數(shù)據(jù)的實(shí)例
你可能得預(yù)先了解
實(shí)現(xiàn)功能:點(diǎn)擊頁面上的按鈕實(shí)現(xiàn)動(dòng)態(tài)追加數(shù)據(jù)
實(shí)現(xiàn)原理:點(diǎn)擊頁面按鈕,通過Ajax提交請(qǐng)求到后臺(tái),后臺(tái)接收請(qǐng)求后進(jìn)行數(shù)據(jù)庫操作,然后返回?cái)?shù)據(jù)到前臺(tái)并進(jìn)行頁面渲染

動(dòng)態(tài)加載更多數(shù)據(jù)
代碼實(shí)現(xiàn)
//1.頁面布局<div> <input type="hidden" value="1"> <inputbutton" name="more" id="more" value="加載更多" onclick="moreData();"/></div>//2.js代碼function moreData(){ var ptip = $(".tip").val(); var jstr = {pageNo:ptip}; $.ajax({ url: "${rc.getContextPath()}/publicity/more.do",//url以具體為實(shí)現(xiàn) type: "POST", dataType: "html", data:jstr, timeout: 5000, cache: false, beforeSend: LoadFunction, //加載執(zhí)行方法 error: erryFunction, //錯(cuò)誤執(zhí)行方法 success: succFunction //成功執(zhí)行方法 }) function LoadFunction() { $("#more").val("加載中..."); } function erryFunction() { alert("獲取數(shù)據(jù)錯(cuò)誤,請(qǐng)重試!"); $("#more").val("加載更多"); } function succFunction(data) { if(data!=null && data!=""){ $(".tip").val(++ptip); $("#more").val("加載更多"); $(".mainContent").append(data); }else{ $("#more").val("無更多數(shù)據(jù)"); $("#more").attr("disabled",true); } }//3.后臺(tái)代碼//3.1 java代碼實(shí)現(xiàn)import java.util.List;import javax.servlet.http.HttpServletRequest;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RequestMethod;import com.appmoudle.base.Consts;import com.appmoudle.model.ssdj.Publicity;import com.appmoudle.service.PublicityService;@Controller@RequestMapping("/publicity")public class MoreData { private String ftlURL = ".../publicity/MoreData.ftl"; @Autowired private PublicityService publicityService; @RequestMapping(value="more",method=RequestMethod.POST) public String getMoreData(HttpServletRequest request,ModelMap map){ Integer start = 0; String pageNo = request.getParameter("pageNo"); if(pageNo!=null){ start = Integer.parseInt(pageNo) * 20; } List<Publicity> dataList = publicityService.findList(start, Consts.PAGE_SIZE, null, "1", null, null); map.put("index_number", start); map.put("dataList", dataList); return ftlURL; }}//3.2 模板頁面//(MoreData.ftl)<#if dataList??> <#list dataList as dataItem> <tr> <td class="f-blue">${dataItem_index+1+index_number}</td> <td> <#if dataItem.comp_name?length > 12> ${dataItem.comp_name?substring(0,12)}.. <#else> ${dataItem.comp_name} </#if> </td> <td>${dataItem.license_number}</td> <td> <#if dataItem.license_name?length > 10> ${dataItem.license_name?substring(0,10)}.. <#else> ${dataItem.license_name} </#if> </td> <td> <#if dataItem.validaty_start?has_content> ${dataItem.validaty_start?date} </#if> </td> <td> <#if dataItem.validaty_end?has_content> ${dataItem.validaty_end?date} </#if> </td> <td> <#if dataItem.license_content?length > 20> ${dataItem.license_content?substring(0,20)}.. <#else> ${dataItem.license_content} </#if> </td> </tr> </#list></#if>效果截圖

后臺(tái)返回?cái)?shù)據(jù)(帶格式)
片尾留注
1、前臺(tái)頁面點(diǎn)擊增加更多后,向后臺(tái)發(fā)起請(qǐng)求,后臺(tái)進(jìn)行數(shù)據(jù)庫操作,返回?cái)?shù)據(jù)后填充到數(shù)據(jù)模板,帶格式的數(shù)據(jù)返回到前臺(tái)填充頁面
2、代碼中的變量 ptip 指代當(dāng)前獲取次數(shù),也可理解為獲取頁數(shù),后臺(tái)設(shè)定每次獲取N條數(shù)據(jù),初次獲取是以頁面已有數(shù)據(jù)數(shù)開始,追加N條數(shù)據(jù),以此循環(huán)
3、本代碼段為項(xiàng)目開發(fā)中使用,因項(xiàng)目使用框架,后臺(tái)代碼書寫格式僅作為參考使用
以上這篇通過Ajax請(qǐng)求動(dòng)態(tài)填充頁面數(shù)據(jù)的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持。
相關(guān)文章:
1. 利用promise及參數(shù)解構(gòu)封裝ajax請(qǐng)求的方法2. ajax請(qǐng)求添加自定義header參數(shù)代碼3. 爬取今日頭條Ajax請(qǐng)求4. history保存列表頁ajax請(qǐng)求的狀態(tài)使用示例詳解5. 一篇文章弄清楚Ajax請(qǐng)求的五個(gè)步驟6. Ajax請(qǐng)求超時(shí)與網(wǎng)絡(luò)異常處理圖文詳解7. AJAX請(qǐng)求數(shù)據(jù)及實(shí)現(xiàn)跨域的三種方法詳解8. 前端ajax請(qǐng)求+后端java實(shí)現(xiàn)的下載zip壓縮包功能示例9. Ajax引擎 ajax請(qǐng)求步驟詳細(xì)代碼10. Ajax請(qǐng)求跨域問題解決方案分析

網(wǎng)公網(wǎng)安備