Spring MVC +HTML5 implements the move end of the bottom slide asynchronously loads more content page effects

Because of the convenience of mobile phone and mobile phone more and more intelligent and faster speed, mobile phone has been flooded with people's lives. With the popularity of mobile phones,

Mobile apps also quickly fire up like micro-mall, mobile web, mobile app, and more. Now that the mobile app is so hot, let's talk today about how to implement the move

Dynamically loading data in Web pages, how do we do it, like a PC Web page, with a previous and next page or other way.

In fact, like a PC Web page and the next page certainly not, the phone screen is very small, not good click at the same time the user experience is poor, today to introduce you to use

Spring MVC +HTML5 implements a way to asynchronously load more content pagination effects on the bottom of the mobile end.

Working principle

When the page slides to the bottom, the user slides up, Zepto listens to the event, and executes the method of loading more content. In this approach, the use of jquery

$.ajax initiates an asynchronous request to the Web server, the Web server receives an asynchronous request, queries and processes the data, and returns the results back to the page

The $.ajax receives the return data, analyzes and processes the data, and appends it to the previous page data. This is how the whole thing works.

Code implementation

1). Front-End Code:

The front-end code needs to use jquery and Zepto, everyone in the online download, the following is the code of the page:

<%@ page language= "java" import= "java.util.*" contenttype= "text/html"; Charset=utf-8 "%><%@ taglib prefix=" C "uri=" Http://java.sun.com/jsp/jstl/core "%><%@ page pageencoding=" UTF-8 "%><%string path = Request.getcontextpath ();%><! DOCTYPE HTML PUBLIC "-//wapforum//dtd XHTML Mobile 1.0//en" "Http://www.wapforum.org/DTD/xhtml-mobile10.dtd" >< HTML xmlns= "http://www.w3.org/1999/xhtml" >
  
2). Back-End Code
  

  

  


  
The backend code is divided into the method of initializing the page to the index and querying the data asynchronously query, the specific code is as follows:

  


  
Web Controller code:

  

  
Package Com.test.web.controller;import Java.util.arraylist;import Java.util.list;import Org.springframework.stereotype.controller;import Org.springframework.ui.model;import Org.springframework.web.bind.annotation.requestmapping;import Org.springframework.web.bind.annotation.responsebody;import com.test.web.dto.datadto;/** * Test Controller * * @author smile2014 * */@Controllerpublic class TestController {/** * * @return */@RequestMapping ("/") public String Index () {retur n "Test";}  /** * Query Order list * * @param model * @param openId * User Authorization ID * @return * @throws Exception */@RequestMapping (value = {"/query"}) @ResponseBodypublic Object Query (model model, Integer PageNo) throws Exception {System.out.println ("pageno=" +pageno); if (PageNo = = null) {PageNo = 1;} list<datadto> datas = new arraylist<datadto> (); for (int i = PageNo *, I < (PageNo + 1) * i++) {Datad to data = new Datadto ("10000" + I, "ten:" + I, "+." + i);d atas.add (data);} System.out.println ("datas=" +datas); return Datas;}} 
  
Data DTO Code:
  

  


  

  
Package com.test.web.dto;/** * Data dto *  * @author smile2014 *  */public class Datadto {private String id;private Str ing time;private string amount;public string GetId () {return ID;} public void SetId (String id) {this.id = ID;} Public String GetTime () {return time;} public void SetTime (String time) {this.time = time;} Public datadto (string ID, string time, string amount) {super (); this.id = Id;this.time = Time;this.amount = Amount;} Public String Getamount () {return amount;} public void Setamount (String amount) {this.amount = amount;}}
  

  

  

  
Page effects

  


  
Just enter the page content:

  


  



  
Slide the contents of the slide loaded on the bottom for the first time:

  


  



  
Slide the contents of the slide loaded to the bottom for the second time:

  


  


  
Note: The entire demo code I have uploaded to my code space, a friend of the need can download from here:

  
Spring MVC +HTML5 implements the move end of the bottom slide asynchronously loads more content page effects

 

Spring MVC +HTML5 implements the move end of the bottom slide asynchronously loads more content page effects