提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

jQueryPHP网页Web 实现 功能 动态 加载
2023-09-11 14:15:12 时间

📄题目要求

  • 阅读下列说明、效果图和代码，进行动态网页开发，回答问题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代码

<!DOCTYPE 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="<li>"+
							"<h2><a href=''>"+data.title+"</a></h2>"+
							"<span>"+ data.time+"</span>"+
							"</li>";
					// ___(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代码

<?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分）

🎯点赞收藏，防止迷路🔥 

相关文章