نمایش مطالب بیشتر با Ajax
نمایش مطالب بیشتر با Ajax – در هنگامی که در حال مشاهده مطالب در صفحه category یا صفحات مشابه هستیم
با استفاده از دکمه بارگذاری می توانیم بدون اینکه صفحه دوباره بارگذاری شود مطالب را دریافت کرده و نمایش دهیم .
ابتدا جهت هماهنگ شدن فایل posts.sql که جدول posts را به دیتابیس تان اضافه می کند را import کنید در سورس پایین آموزش ضمیمه شده است دقت داشته باشید نام دیتابیس مان articles می باشد .
فایل index.html
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Rapidcode.iR - سورس کد</title>
<link rel="stylesheet" href="static/css/main.css">
</head>
<body>
<div class="container">
<a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>
<article class="artc">
<img src="https://rapidcode.ir/wp-content/uploads/2020/04/github-php-login.png" alt="ورود با حساب گیت هاب (Github) در PHP و جاوا اسکریپت">
<h2>ورود با حساب گیت هاب (Github) در PHP و جاوا اسکریپت</h2>
<p>ورود با حساب گیت هاب – خیلی از توسعه دهندگان یا افرادی که در زمینه توسعه نرم افزار فعال هستند با github گیت هاب آشنا هستند . این خیلی مفید</p>
<a href="https://rapidcode.ir/2291/web-snippet-code/how-to-use-github-signin-on-your-website/" target="_blank">ادامه مطلب</a>
</article>
<a id="loadMore" href="javascript:void(0)">بارگذاری مطالب بیشتر</a>
</div>
<script src="static/js/app.js"></script>
</body>
</html>
فایل main.css
article {
width: 100%;
border: 2px solid #f44336;
padding: 10px;
float: right;
margin-left: 15px;
margin-top: 15px;
}
article img {
width: 200px;
}
article h2 {
height: 82px;
}
article p {
height: 56px;
overflow: hidden;
}
article a {
text-decoration: none;
font-weight: bold;
background-color: #FF9800;
color: white;
width: 100%;
padding: 10px 0;
display: block;
}
#loadMore{
background-color: cyan;
color: black;
font-weight: bold;
padding: 15px;
border-radius: 4px;
text-decoration: none;
display: inline-block;
margin-top: 25px;
}
اسکریپت articles.php
این اسکریپت داده های دیتابیس را به صورت json خروجی می دهد .
<?php
header("Content-Type: application/json");
$mysqli = new mysqli("localhost", "root", "", "articles");
$mysqli->set_charset("utf8");
$stmt = $mysqli->stmt_init();
$limitEntity = @$_GET['entity'];
$query = "SELECT * FROM `posts` LIMIT ?,1";
$stmt->prepare($query);
$stmt->bind_param('s', $limitEntity);
$rows = [];
if ($stmt->execute() && $res = $stmt->get_result()) {
if ($stmt->affected_rows || $res->num_rows) {
while ($row_loop = $res->fetch_assoc()) {
$rows = $row_loop;
}
}
}
$stmt->close();
$mysqli->close();
$jsonData = json_encode($rows);
echo $jsonData;
?>
اسکریپت app.js
در نظر داشته باشید به جای http://localhost/jet/articles.php آدرس لوکال هاست خود را وارد کنید .
let lockHttpRequest = false;
let loadMoreDOM = document.getElementById("loadMore");
loadMoreDOM.onclick = function() {
if(lockHttpRequest) return false;
lockHttpRequest = true;
const xhr = new XMLHttpRequest();
xhr.responseType = "json";
let queryString = new URLSearchParams;
const articlesDOM = document.getElementsByClassName("artc");
queryString.append("entity", articlesDOM.length);
queryString = "?" + queryString.toString();
xhr.open("GET", "http://localhost/jet/articles.php" + queryString);
xhr.onload = function() {
lockHttpRequest = false;
const posts = this.response;
if(!posts.id){
alert("مطلب دیگری برای نمایش وجود ندارد")
return false;
}
let html = ajaxHtmlResult(posts);
const container = document.getElementsByClassName("container")[0];
container.innerHTML += html;
container.appendChild(loadMoreDOM);
document.querySelectorAll(".container #loadMore")[0].remove();
loadMoreDOM = document.getElementById("loadMore");
}
xhr.onerror = function() {
lockHttpRequest = false;
console.warn("[XHR Error]");
}
xhr.send();
}
function getLastArticle(){
const last = document.getElementsByClassName("artc");
return last[last.length-1];
}
function ajaxHtmlResult(data) {
const templateHtml = `<article class="artc"><img src="${data.thumbnail}" alt="${data.title}"><h2>${data.title}</h2><p>${data.content}</p><a href="${data.link}" target="_blank">ادامه مطلب</a></article>`;
return templateHtml;
}
ارسال نظر