نمایش مطالب بیشتر با Ajax

نمایش مطالب بیشتر با 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;
}


دمو برنامه


دانلود سورس نمایش مطالب بیشتر با Ajax

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us

پکیج غول آموزش برنامه نویسی PHP با ساخت فروشگاه { دیجیکالا }


This will close in 0 seconds