用js实现简单的加载更多功能

原创于 2020-12-14 14:38:35 发布 · 220 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了一个简单的分页加载实现方案，使用JavaScript发起异步请求获取新闻数据，并通过PHP后端根据不同页数返回相应内容。展示了如何在前端按钮点击事件中加载新数据并更新页面显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新手上路，请多指导

```		<div ></div>
		<button type="button">加载更多</button>
js代码
	let odiv = document.querySelector('div')
	let btn = document.querySelector('button')
	// 按照分页原理,设一个页数page
	function getnews(page){
		let xhr = new XMLHttpRequest()
		// 向后台传参（页数），
		xhr.open("get","news.php?page="+page,true)
		xhr.onreadystatechange=function(){
			if(xhr.status == 200 && xhr.readyState == 4){
				console.log('ii')
		// 后台进行条件判断，然后返回数据对应页的数据
				odiv.innerHTML += xhr.responseText
			}
		}
		xhr.send()
	}
	getnews(1)
	btn.onclick = function(){
		getnews(2)
		this.style.display='none'
	}
	php代码
	<?php
	header('Content-type:text/html;charset=utf-8');
	$page = $_GET['page'];
	if($page == 1){
		echo "昨晚斗鱼某男主播，众目睽睽之下，竟然。。。";
	}else if($page == 2){
		echo "跳起了钢管舞，大秀腹肌，小伙伴们都惊呆了";
	}
?>