jQuery+AJXA+PHP动态获取数据实现新闻网页下拉加载功能(1+X Web前端开发中级例题)

📄题目要求

阅读下列说明、效果图和代码，进行动态网页开发，回答问题1至问题4。

🧩说明

在我们的生活中，当加载的内容看完后，再次下拉，就会加载出更多的内容，本项目实现下拉加载功能，应用HTML、CSS、AJAX、JSON、PHP等技术。项目名称为news，包含主页index.html、style.css和adminList.php文件，其中，主页面index.html显示新闻内容；style.css为主页样式文件；adminList.php为主页提供数据，返回JSON格式数据。

主页分为两个部分：焦点图和新闻列表，当滚动条触底，通过ajax发送请求到adminList.php，adminList.php返回JSON格式的数据。在主页上通过ajax拿到数据后，使用JQuery进行DOM操作，实现动态加载数据。如图3-1所示。

进行动态网页开发，补全代码，在（1）至（18）处填入正确的内容。

🧩效果图

🧩补充：题目文件结构

💻HTML代码


html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表页title>
	<link rel="stylesheet" href="css/style.css">
	<script src="js/jquery.min.js">script>
head>
<body>
	<div class="box">div>
	<div class="list">
		<div class="title">新闻列表div>
		<ul>
			
		ul>
	div>
	<script src="js/index.js">script>
body>
html>

💻CSS代码


body,h1,h2,h3,h4,h5,h6,p,ol,ul,dl,dd{
	margin: 0;
	padding: 0;
}
ul,ol{
	list-style: none;
}
a{
	text-decoration: none;
}
.box{
	width: 100%;
	height: 300px;
	background: url("../img/timg.jpg") center;
}
.list{
	width: 700px;
	margin:0 auto 50px;
}
.list .title{
	font-size: 22px;
	line-height: 60px;
}
.list ul{
	/* ____(1)____;设置盒子投影，颜色为#CCC,模糊度为15px */
	box-shadow: 0 0 15px #CCC;/*设置盒子投影，颜色为#CCC,模糊度为15px*/
}
.list ul li{
	position: relative;
	padding:20px;
	border-bottom:1px dashed #ccc;
}
.list ul li h2{
	width: 500px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: normal;
	font-size: 16px;
}
.list ul li h2 a{
	color:#333;
}
.list ul li span{
	position: absolute;
	top:20px;
	right:20px;
}

💻JavaScript代码


$(function(){
	var num=1;//当前页数
var pageCount=7;//每页显示的数量
var pageNum=0;//总页数
	function ajaxDate(num){
		$.ajax({
			url: 'http://localhost/second/adminList.php',
			type: 'get',
			dataType: 'json',
			data: {
				// ___(10)_____//传递的参数
				num: num,pageCount:pageCount//传递的参数
			},
			success:function(res){
				pageNum=Math.ceil(res.count/pageCount);//请求的总页数
				res.list.forEach(function(data){
					var str="
"+

""+data.title+" "+
""+ data.time+""+
"

";

// ___(12)_______;//将字符串追加到指定的位置

					$(".list ul").append(str);//将字符串追加到指定的位置

})

}

})

}

ajaxDate(num);

	$(window).scroll(function(){

// var sTop=____(13)__;//获取滚动条卷进去的距离，用jquery

		var sTop=$(this).scrollTop();//获取滚动条卷进去的距离，用jquery

// var sHeight=____(14)_____;//获取可视区域的高度，用jquery

		var sHeight=$(this).height();//获取可视区域的高度，用jquery

// var bodyH=______(15)________;//获取页面所有内容的高度，用jquery

		var bodyH=$(document).height();//获取页面所有内容的高度，用jquery

// if(___(16)_____){//请写出判断条件

		if(sTop+sHeight>bodyH-1){//请写出判断条件

num++;

// if(____(17)____){//请写出判断条件

if(num<=pageNum){//请写出判断条件

console.log(num);

// ___(18)______;//调用函数请求加载数据

ajaxDate(num);//调用函数请求加载数据

}

})

💻PHP代码


// header ("Content-type: text/html; charset=utf-8")
$servername = "localhost";
$username = "root";
$password = "123456";
 
// 创建连接
// $conn = __(2)____($servername, $username, $password);
$conn = new mysqli($servername, $username, $password);
// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
 
mysqli_query($conn,'set names utf8');
 
// 查询数据库
mysqli_select_db($conn,"list");
// 求信息总数
// $sqlCount="____(3)____";# 查询所有数据的sql语句
$sqlCount="select * from news";# 查询所有数据的sql语句
// $resultC = ___(4)____(__(5)___, __(6)____);# 执行数据库
$resultC = mysqli_query($conn,$sqlCount);# 执行数据库
$count=mysqli_num_rows($resultC);
 
$num=$_GET["num"];
$pageCount=$_GET["pageCount"];
// $start=_____(7)____;#求开始查询的索引值
$start=($num-1)*$pageCount;#求开始查询的索引值
// 返回指定数据
// $sql = "___(8)______";#返回指定数据的sql语句
$sql = "select * from news limit $start,$pageCount";#返回指定数据的sql语句
$result = mysqli_query($conn, $sql);
$res = array('count'=>$count);
$jarr=array();
// 遍历数据
// while($row = _____(9)_____($result))
while($row = mysqli_fetch_array($result))
  {
    array_push($jarr,$row);
  }
$res = array(
    'count'=>$count,
    'list'=>$jarr
);
echo json_encode($res);
mysqli_close($conn);
?>

🎯实现效果

因为没有这个表的数据，所以没有实际运行出来，这题的难度稍微有点大，对于PHP和AJAX不熟悉的同学，直接没戏了

📰完整答案

试题二（30分）
【问题】（30分）
（1）box-shadow: 0 0 15px #ccc
（2）new mysqli
（3）SELECT * from news (不区分大小写)
（4）mysqli_query
（5）$conn
（6）$sqlCount
（7）($num-1)*$pageCount
（8）SELECT * from news limit $start,$pageCount
（9）mysqli_fetch_array
（10）num: num,pageCount:pageCount
（11）Math.ceil(res.count/pageCount)
（12）$(".list ul").append(str)
（13）$(this).scrollTop()
（14）$(this).height()
（15）$(document).height()
（16）sTop+sHeight>bodyH-1（这里的数值不是唯一的，可以是任意数字）
（17）num<=pageNum或者pageNum>=num
（18）ajaxDate(num)
（1-12每空1.5分，13-18每空2分共30分）

🎯点赞收藏，防止迷路🔥

jQuery+AJXA+PHP动态获取数据实现新闻网页下拉加载功能(1+X Web前端开发中级 例题)

📄题目要求

🧩说明

🧩效果图

🧩补充：题目文件结构

💻HTML代码

💻CSS代码

💻JavaScript代码

"+data.title+"

💻PHP代码

🎯实现效果

📰完整答案

jQuery+AJXA+PHP动态获取数据实现新闻网页下拉加载功能(1+X Web前端开发中级例题)