بارگذاری خودکار در jQuery

متد بارگذاری خودکار در jQuery یک درخواست برای صفحات مشخص سرور ارسال و سلکتور مورد نظر را با محتویات برگشتی تغییر می دهد.

در این آموزش , قصد داریم به شما نحوه بارگذاری خودکار در jQuery بعد از لود صفحه و در یک زمان مشخص را نمایش بدیم .

آموزش بارگذاری خودکار در jQuery به شما کمک می کند که محتویات را از اخرین فید ها بخوانید , بنرهای تبلغیاتی و غیره .. را بصورت رندوم نمایش بدید .

همانند کاری که در سرویس های وبلاگ دهی مانند بلاگفا و.. برای نمایش بنر های تبلیغاتی انجام می شود.

بارگذاری خودکار در jQuery

همانطور که قبلا بارها دیدیم کدنویسی جاوااسکریپت با جی کوئری بسیار ساده , آسان و سریع است و در این مثال هم با چند خط کد ساده قابلیت بارگذاری خودکار در jQuery را ایجاد می کنیم.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
setInterval(function(){
$("#screen").load('banners.php')
}, 2000);
});
</script>

$(document).ready(function(){

setInterval(function(){

$("#screen").load('banners.php')

}, 2000);

});

</script>

فایل PHP به نام banner.php توسط Ajax با متدload() فراخوانی می شود . این فایل شامل یک آرایه از کد رنگی است . یکی از این کدها با تابع array_rand برای تغییر بکگراند تگ div مشخص شده انتخاب می شود.

کد php :

<?php
$bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");
$bg = array_rand($bg_array,1);
?>
<div class="banner" style="background-color:<?php echo $bg_array[$bg];?>;" >
<div class="txt-title">jQuery DIV Auto Load Refresh</div>
<div class="txt-subtitle">This Banner auto loads and refreshes every 2 seconds.</div>
</div>

<?php

$bg_array = array("#CEED9D","#ECED9D","#EDCF9D","#EC9CA7","#ED9DD0","#EE9DE2","#D69DEC","#9E9CEC");

$bg = array_rand($bg_array,1);

<div class="txt-title">jQuery DIV Auto Load Refresh</div>

<div class="txt-subtitle">This Banner auto loads and refreshes every 2 seconds.</div>

</div>

این رویداد بارگذاری (load) هر ۲ ثانیه یکبار برای بروزرسانی بنر اجرا می شود. به حای استفاده از داده های ثابت در آرایه می توانید مقادیر را از طریق دیتابیس خوانده و استفاده کنید .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید