The example Code explains the implementation of ajax without refreshing pages,

The example Code explains the implementation of ajax without refreshing pages,

1. The benefits of Ajax refreshing pages: provides a good customer experience. Ajax is used to obtain data from the database and display the data in the background, banning the blank status waiting for loading pages;

2. So, is the Ajax refreshing page running on a dynamic page (. php )? Static Page (.html/. htm/. shtml )? The answer is: static pages;

3. Implementation principle: data returned from dynamic pages is obtained and displayed by combining the front-end JS script program with Ajax.

Now I have to pay attention to nothing new, even pagination. The following is a section of the Code for refreshing the Code Compiled by xiaobian everyday. I hope it will help you.

The Code is as follows:

I. HTML code:

<Table class = "table style-5"> <thead id = "t_head"> <tr> <th> NO. </th> <th> title </th> <th>> location </th> <th> registered </th> <th> Category </th> <th> operation </th> </tr> </thead> <tbody id = "t_body"> <! -- Ajax fill list --> </tbody> </table> <button id = "firstPage"> homepage </button> <button id = "previous"> previous page </button> <button id = "next"> next page </button> <button id = "last"> last page </button>

Ii. ajax code:

Var pageSize = "10"; // The number of lines per page var currentPage = "1"; // var totalPage = "0" on the current page "; // total number of pages var rowCount = "0"; // total number of pages var params = ""; // parameter var url = "activity_list.action"; // action $ (document ). ready (function () {// jquery code loads as the document is loaded // query function queryForPages () by PAGE {$. ajax ({url: url, type: 'post', dataType: 'json', data: "qo. currentPage = "+ currentPage +" & qo. pageSize = "+ pageSize + params, success: function callbackFun (Data) {// parse json var info = eval ("(" + data + ")"); // clear data clearDate (); fillTable (info) ;}}) ;}// fill data function fillTable (info) {if (info. length> 1) {totalPage = info [info. length-1]. totalPage; var tbody_content = ""; // No initialization string "", "undefined" for (var I = 0; I <info. length-1; I ++) {tbody_content + = "<tr>" + "<td data-title = 'sequence number '>" + (I + 1 + (currentPage-1) * pageSize) + "</td>" + "<td data-title = 'title'>" + info [I]. title. subs Tr (0, 20) + "</td>" + "<td data-title = 'location'>" + info [I]. address. substr () + "</td>" + "<td data-title = 'registered '>" + info [I]. quota_sign + "person </td>" + "<td data-title = 'category'>" + info [I]. type + "</td>" + "<td data-title = 'operation'> <a href = '<% = request. getContextPath () %>/activity_edit.action? Id = "+ info [I]. id + "'> edit </a> </td>" + "</tr>" $ ("# t_body" ).html (tbody_content );}} else {$ ("# t_head" ).html (""); $ ("# t_body" ).html ("<div style = 'height: 200px; width: 700px; padding-top: 100px; 'align = 'center'> "+ info. msg + "</div>") ;}// clear data function clearDate () {$ ("# t_body" ).html ("");} // Search Activity $ ("# searchActivity "). click (function () {queryForPages () ;}); // homepage $ ("# firstPage "). click (function () {currentPage = "1"; queryForPages () ;}); // previous Page $ ("# previous "). click (function () {if (currentPage> 1) {currentPage --;} queryForPages () ;}); // next page $ ("# next "). click (function () {if (currentPage <totalPage) {currentPage ++;} queryForPages () ;}); // The last page $ ("# last "). click (function () {currentPage = totalPage; queryForPages ();});});

The above code is a small Editor to introduce you to the implementation of ajax without refreshing pages, I hope to help you.

Articles you may be interested in:

• XML example of Flash & Ajax operations: Refreshing pagination
• Php ajax supports id locating without refreshing new pages
• Jquery plug-in web2.0 split page script, which can be used for ajax without refreshing pages
• AspNetAjaxPager and Asp. Net General Ajax pagination controls without refreshing, support for Symmetric Multi-Data Binding
• JS + Ajax + Jquery implement the implementation of refreshing pages and grouping
• Implementation of ajax without refreshing pagination (php)
• JQuery Pagination Ajax paging plug-in (no refreshing or delay during paging switching)
• Example code of JQuery + Ajax without refreshing pagination
• Php + ajax Implementation of refreshing pagination
• Asp.net uses AJAX to implement refreshing pagination