Spring Mvc+ajax Page

Paging general idea: every time the page to the current page to the background and get the JSON data from the background, parse the layout to this page.

1. Service-Side code:

@Controller
public class Memcachedcontrller {
@Autowired
Private Memcachereadservice Memcacheread;

private static final Logger LOG = Logger.getlogger (Memcachedcontrller.class);

Page initialization
@RequestMapping (value= "/memcached", Method={requestmethod.get,requestmethod.post})
Public Modelandview Memcacheddisplay () {
List.clear ();
Getmemcachedall ();
return new Modelandview ("/memcached/memcachedshow");
}

Perform the previous, next, and other operations
@RequestMapping (value = "/memcached/h2", method = {Requestmethod.post})
@ResponseBody
Public List H2 (HttpServletRequest request,
HttpServletResponse response) throws Exception {
String dt=request.getparameter ("DT");
int current=integer.parseint (DT);
return result (current);
}

Executes when the page refreshes
@RequestMapping (value = "/memcached/h3", method = {Requestmethod.post})
@ResponseBody
Public List H3 (HttpServletRequest request,
HttpServletResponse response) throws Exception {
String dt=request.getparameter ("DT");
int current=integer.parseint (DT);
SYSTEM.OUT.PRINTLN (DT);
List.clear (); Empties all data in the collection
Getmemcachedall ();//Get the latest memcached data
return result (current);
}

List List = new ArrayList ();

Get memcached Data
Public List Getmemcachedall () {
/*for (int i=0;i<10000;i++) {
Jsondata p= new Jsondata ();
P.setgix_x ("a" +i);
P.setid ("1" +i);
P.setgiy_y ("A_b" +i);
List.add (P);
}
Return list;*/
Map<string,string> Data=memcacheread.read ();
Set<string> Set=data.keyset ();
Iterator iter = Set.iterator ();
int i=0;
List List = new ArrayList ();
while (Iter.hasnext ()) {
String key = (string) iter.next ();
if (Memcacheread.get (key)!=null) {
/*if (i==5) break;
i=i+1;
SYSTEM.OUT.PRINTLN (key);//Get Key
System.out.println (Get (key));//Get value*/of key in cache
if (i==100) break;
i=i+1;
String[] Strsplit=memcacheread.get (key). ToString (). Split ("--");
Jsondata p= new Jsondata ();
P.setgix_x (Strsplit[0]);
P.setid (key);
P.setgiy_y (strsplit[1]);
List.add (P);
}
}
return list;
return Memcacheread.getallvalue ();
}

Returns the result set after processing
Public List result (int dt) {
int pagesize=40;
ArrayList list2 = new ArrayList ();
Page pg=new page (list.size (), dt,pagesize);
Pagemessage pm=new pagemessage ();
Pm.setpagecount (Pg.getpagecount ());
if (Dt<pg.getpagecount ()) {
for (int i= (dt-1) *40;i<dt*40;i++) {
List2.add (List.get (i));
}}
else{
for (int i= (dt-1) *40;i<list.size (); i++) {
List2.add (List.get (i));
}
}
List2.add (PM);
return list2;
}





}

2. Front-End Code:

Morepage.css

body{
font-size:18px;
text-align:30%;
}
table{
Border-collapse:collapse;
}
Ji=
List-style:none;
BORDER:1PX solid;
width:20px;
height:20px;
Text-align:center;
margin:5px;
padding:2px;
Float:left;
Cursor:pointer;
}
#dataDisplay {
margin-left:30%;
margin-top:20px;
}

Js:

var current=0;
var t=0;
function test2 (DT) {
WINDOW.T=DT;
$.ajax ({
URL: "/bdms-web/memcached/h2?dt=" +dt,
Type: ' POST ',
DataType: ' JSON ',
timeout:2000,
Cache:false,
Error:function (Resultdata) {
Alert ("XML");
},


Success:function (Resultdata) {

ShowPage (RESULTDATA,DT);
}
})}


function Update (DT) {
WINDOW.T=DT;
$.ajax ({
URL: "/bdms-web/memcached/h3?dt=" +dt,
Type: ' POST ',
DataType: ' JSON ',
timeout:2000,
Cache:false,
Error:function (Resultdata) {
Alert ("XML");
},


Success:function (Resultdata) {

ShowPage (RESULTDATA,DT);
}
})}






function ShowPage (RESULTDATA,DT) {
var fristpagehtml;
var prevpagehtml;
var nextpagehtml;
var lastpagehtml;
var gopagehtml;
var length =resultdata.length;
var T=resultdata[length-1].pagecount;
Gopagehtml= "<input id= ' edit_count ' size= ' 4 ' type= ' text '/> <input type= ' button ' value= ' Go ' onclick= ' test3 (); ' /> ";

fristpagehtml = "<a onclick= ' test2 (" + (0+1) + "); ' href= ' javascript:void (0); ' > Home </a> ";
if ((dt-0) <=1) {
prevpagehtml = "<a> prev </a>";
}else{
prevpagehtml = "<a onclick= ' test2 (" + (dt-1) + "); ' href= ' javascript:void (0); ' > Prev </a> ";
}
if ((dt-0) < (t-0)) {
nextpagehtml = "<a onclick= ' test2 (" + (dt-0+1) + "); ' href= ' javascript:void (0); ' > Next </a> ";
}else{
nextpagehtml = "<a> next </a>";
}

lastpagehtml = "<a onclick= ' test2 (" +t+ "); ' href= ' javascript:void (0); ' > no page </a> ";

var html = "<table border=1px style= ' font-size:12px; color:red; Text-align:center ' ><tr><td width= ' >id</td><td width= ' >gix_x</td><td ' Width= ' >GIX_Y</td></tr> ';
for (Var i=0;i<resultdata.length-1;i++) {

html = html+ "<tr ><td>"
+resultdata[i].id+ "</td><td>"
+resultdata[i]. gix_x+ "</td><td>"
+resultdata[i]. Giy_y
+ "</td></tr>";
}
HTML = html + "<tr ><td colspan=3 text-align=center>" +fristpagehtml+ "&nbsp&nbsp" +prevpagehtml+ " &AMP;NBSP&AMP;NBSP "+" Total "+resultdata[length-1].pagecount+" page &nbsp; Current "+dt+" page "+" &nbsp&nbsp "+ nextpagehtml+ "&nbsp&nbsp" +lastpagehtml+ "&nbsp&nbsp" +gopagehtml+ "</td></tr>";
html = html+ "</table>";
document.getElementById ("div"). innerhtml=html;

}


function Test3 () {
var Str=document.getelementbyid ("Edit_count"). Value;
Test2 (str);
}
SetInterval (' Update (WINDOW.T) ', 1000*10);
/*function TT ()
{
Alert ("Hello");

}
SetInterval (' TT () ', 1000*15); */
SetTimeout (' TT () ', 15000);

Jsp:

memcachedshow.jsp

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<%@ taglib prefix= "C" uri= "Http://java.sun.com/jsp/jstl/core"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >


<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>insert title here</title>
<link rel= "stylesheet" type= "Text/css" href= "<c:url value="/style/css/morepage.css "/>"/>
<script type= "Text/javascript" src= "<c:url value="/js/jquery.js "/>" ></script>
<script type= "Text/javascript" src= "<c:url value="/js/jquery.min.js "/>" ></script>
<script type= "Text/javascript" src= "<c:url value="/js/ajaxpage.js "/>" ></script>
<!--<script type= "Text/javascript" src= "/script/ajaxpage.js" ></script>-
<body onload= ' test2 (1) ' >
<!--<p style= "Text-align:center" ><input type= "button" size= "ten" value= "Submit" onclick= "Validate ();" /></p>--
<center>
<div id= "div" > </div>
</center>
<!--<form action= "Update" method= "POST" ><input type= "Submit" value= "XML generation" ></form> "


</body>

Page effect:

Simulating background data:

Get memcached Data
Public List Getmemcachedall () {
for (int i=0;i<10000;i++) {
Jsondata p= new Jsondata ();
P.setgix_x ("a" +i);
P.setid ("1" +i);
P.setgiy_y ("A_b" +i);
List.add (P);
}
return list;

｝

Spring Mvc+ajax Page