当前位置：首页 > article >正文

前端模拟新闻列表ajax请求 mocky

article 2024/11/15 4:39:05

效果图：在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title> 
	</head>
	<style>
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		ul::after{
			content: '';
			width: 30%;
		}
		a {
			width: 30%;
		}
	</style>
	
	<body>
		<ul id="List">
			<a>
				<div class="img"><img src="../images/test/1.jpg" alt="">
				</div>
				<div class="cont">
					<div class="date">2023.05.29</div>
					<h3>标题1</h3>
				</div>
			</a>
			<a>
				<div class="img"><img src="../images/test/1.jpg" alt="">
				</div>
				<div class="cont">
					<div class="date">2023.05.29</div>
					<h3>标题1</h3>
				</div>
			</a>
			<a>
				<div class="img"><img src="../images/test/1.jpg" alt="">
				</div>
				<div class="cont">
					<div class="date">2023.05.29</div>
					<h3>标题1</h3>
				</div>
			</a>
		</ul>
		<div id="more"
			style="border: 1px solid #f00;height: 100px;margin-top: 150px;text-align: center;cursor: pointer;">查看更多
		</div>
	</body>
	<script src="../js/jquery.js"></script>

	<script>
		$(function() {
			var pageIndex = 1,
				pageSize = 5,
				typid = '14',
				key = "";

			$("#more").click(function() {
				loadMore(++pageIndex, pageSize, typid, key);

			})

			function loadMore(pageIndex, pageSize, typid, key) {
				$.ajax({
					type: 'post',
					async: false,
					dataType: "json",
					url: 'https://run.mocky.io/v3/2d7364b2-285f-4c2c-a5c9-36c206266d82',
					data: { method: 'GetNews', pageIndex: pageIndex, pageSize: pageSize, typid: typid, key: key },
					success: function(data) {
						console.log(data.newslist, "请求成功")
						if (data.newslist != '') {
							var news = "";
							for (let i = 0; i < data.newslist.length; i++) {

								news += (" <a> ");
								news += ("<div class='img'><img src='" + data.newslist[i].image +
									"' alt=''></div>");
								news += ("<div class='cont'>");
								news += ("<div class='date'>" + data.newslist[i].ntime + "</div>");
								news += ("<h3>" + data.newslist[i].ntitle + "</h3>");
								news += ("</div>");
								news += ("</a>");

							}
							$("#List").append(news);
							if ($("#List").find("a").length >= data.Count) {
								$("#more").hide();
							}

						} else {

							$("#more").hide();
						}
					}
				});
			}
		});
	</script>
</html>