Ajax realizes paging without refresh-PHP Tutorial-php.cn

Home

Backend Development

PHP Tutorial

Ajax realizes paging without refresh

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 08, 2016 am 09:30 AM

ajax get html nbsp url

In ordinary paging, once the page number changes, the url changes and the entire page will be refreshed. If we want the change in the page number not to affect the changes in the entire web page, we can use ajax technology.

AJAX is a technology for creating fast, dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging a small amount of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.

Through the client html code, use ajax to pass the data from the server through the get method and display it in html.

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus&#174;">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>ajax实现无刷新分页</title>
  <script type="text/javascript">
	function f1(url){
		var xhr = new XMLHttpRequest;
		xhr.onreadystatechange = function() {
			if(xhr.readyState==4){
				document.getElementById('d').innerHTML = xhr.responseText ;
			}
		}
		xhr.open("get",url);
		xhr.send(null);
	}	
	//页面加载完成后，就调用该函数
	window.onload = function(){
		f1("fenye-data.php");
	}
  </script>
 </head>
 <body>
	<h2 align=&#39;center&#39;>ajax实现无刷新分页</h2>
	<div id=&#39;d&#39;></div>
 </body>
</html>

Copy after login

In the paging class, we only need to change the address of the hyperlink, change the original address to call the f1() method through js, and convert the link Passed to the f1() method in js.

json implements paging without refresh effect. Compared with ajax, json writes both html and css on the client, thus saving server bandwidth and speeding up user requests. The specific method will not be described again.

The above introduces the implementation of ajax non-refresh paging, including aspects of the content. I hope it will be helpful to friends who are interested in PHP tutorials.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn