通過Ajax請求動態填充頁面數據的實例
你可能得預先了解
實現功能:點擊頁面上的按鈕實現動態追加數據
實現原理:點擊頁面按鈕,通過ajax提交請求到后臺,后臺接收請求后進行數據庫操作,然后返回數據到前臺并進行頁面渲染
動態加載更多數據
代碼實現
//1.頁面布局 <div style="padding: 0 0 20px 0;"> <input type="hidden" class="tip" value="1"> <input style="background:#01affe;color: #fff;cursor: pointer; text-align:center;height:30px;vertical-align: middle;padding:0 5px; type="button" 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以具體為實現 type: 'post', datatype: 'html', data:jstr, timeout: 5000, cache: false, beforesend: loadfunction, //加載執行方法 error: erryfunction, //錯誤執行方法 success: succfunction //成功執行方法 }) function loadfunction() { $("#more").val('加載中...'); } function erryfunction() { alert("獲取數據錯誤,請重試!"); $("#more").val('加載更多'); } function succfunction(data) { if(data!=null && data!=""){ $('.tip').val(++ptip); $("#more").val('加載更多'); $('.maincontent').append(data); }else{ $("#more").val('無更多數據'); $("#more").attr('disabled',true); } } //3.后臺代碼 //3.1 java代碼實現 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>
效果截圖
后臺返回數據(帶格式)
片尾留注
1、前臺頁面點擊增加更多后,向后臺發起請求,后臺進行數據庫操作,返回數據后填充到數據模板,帶格式的數據返回到前臺填充頁面
2、代碼中的變量 ptip 指代當前獲取次數,也可理解為獲取頁數,后臺設定每次獲取n條數據,初次獲取是以頁面已有數據數開始,追加n條數據,以此循環
3、本代碼段為項目開發中使用,因項目使用框架,后臺代碼書寫格式僅作為參考使用
以上這篇通過ajax請求動態填充頁面數據的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持碩編程。