0

نمایش محتوا توسط Ajax و jQuery در صفحات وب

 
hasantaleb
hasantaleb
کاربر طلایی1
تاریخ عضویت : شهریور 1387 
تعداد پست ها : 58933
محل سکونت : اصفهان

نمایش محتوا توسط Ajax و jQuery در صفحات وب

در کد‌های بسیاری از صفحات وب این روزها می توان تکه کدهایی را پیدا کرد که از jQuery برای نمایش و یا انجام عملیات خاصی استفاده می کنند و jQuery را می‌توان بخش جدا نشدنی صفحات سایت ها و وبلاگ هایی امروزی دانست. همچنین همانطور که می‌دانید با استفاده از تکنولوژی ای‌جکس ( Ajax ) بسیاری از سایت ها دیگر برای نمایش محتوا و اطلاعات مورد نیاز مانند گذشته کاربران خود را وادار نمی کنند به صفحه‌ی دیگری بروند و مرورگر آن ها مجبور باشد صفحه جدیدی را برای نمایش ، بارگذاری و اجرا کند و بعد از اینکه کاربر مثلاً بر روی یک دکمه در آن صفحه وب کلیک کرد اطلاعات مربوطه در قسمتی از همان صفحه بارگذاری و نمایش داده می شود. در این نوشته از تورتک یاد می گیریم که چگونه ما هم با استفاده از jQuery و Ajax محتوای مورد نیاز خود را از دیگر صفحات وب برداشته و در صفحه فعلی سایت خود به کاربران نمایش دهیم.

 

آشنایی با .load() در jQuery

یکی از API های موجود در jQuery که به ما اجازه می دهد با استفاده از تکنولوژی Ajax محتوای مورد نظر خود را از هر سروری دریافت و به نمایش بگذاریم .load() است. در مثال زیر همانطور که می بینید یک دکمه در صفحه وب خود ایجاد کرده ایم که با کلیک کاربران بر روی آن تابع show-data را فراخوانی می کند و در این تابع با استفاده از .load() تعیین کرده ایم که محتوای موجود در test.html در قست از صفحه وب ما که با box-data نام گذاری شده است نمایش داده شود.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" onclick="show_data()" value="نمایش اطلاعات" />
<div id="box_data">
</div>
<script>function show_data() {
$('#box_data').load("/test.html");
}</script>
</body>
</html>

البته اگر می خواهید در مدت زمانی که بارگذاری و نمایش اطلاعات در صفحه ما از صفحه test.html طول می کشد یک آیکون متحرک زیبا در قسمت box_data صفحه ما نمایش داده شود می توانید از سایت ajaxload برای ساخت و دریافت این آیکون استفاده کنید و سپس در تابع show_data قبل از نوشتن دستور load از کد زیر استفاده کنید.

1
$('#box_data').html('<p><img src="/images/loader.gif"/></p>');

البته مثال بالا ساده ترین طریقه استفاده از load است و اگر می خواهید از این دستور در صفحات وب خود استفاده کنید برای کنترل خطا‌های احتمالی بهتر است راهنمای کامل این دستور را در سایت رسمی jQuery مطالعه فرمائید.

نمایش محتوا و اطلاعات

نمایش تنها قسمتی از صفحه توسط .load()

اما در بیشتر مواقع نیاز به این است که تنها تکه ای از محتوای موجود در صفحه مقصد را در صفحه فعلی نمایش دهیم مثلاً در هنگامی که می خواهید محتوای آموزش های سایت خود را به صورت Ajax در صفحه اصلی سایت خود به بازدید کنندگان نمایش دهید. برای این منظور نیازی نیست بر روی محتوای بارگذاری شده توسط load تغییر خاصی را انجام دهیم و تنها کافی است در هنگام استفاده از این روش به load بگوییم که قصد داریم کدام قسمت از صفحه مقصد را بارگذاری و نمایش دهیم. برای این کار تنها کافی است از شناسه ( id ) قسمتی که می خواهیم در صفحه مقصد اطلاعات آن خوانده شود را به load معرفی کنیم. برای مثال برای اینکه متن مربوط به قسمت قوانین کپی برداری از نوشته های سایت تورتک را در صفحه فعلی بارگذاری و نمایش دهیم از دستور زیر استفاده می کنیم چون این متن در قسمت ( div ) در این سایت نوشته شده است که شناسه ( id ) آن copyrightInner تعیین شده است.

1
$('#box_data').load('/ #copyrightInner');

با اجرای کدهای بالا محتوای زیر در قسمت box_data صفحه شما نمایش داده می شود.

تمامی حقوق متعلق به تورتک هرگونه کپی برداری پیگرد قانونی دارد.

البته فراموش نکنید قبل از استفاده از دستور بالا اول باید مطمئاً شویم که قبلاً قسمتی ( Div و … ) در صفحه فعلی با شناسه box-data ساخته ایم که می خواهیم اطلاعات بارگذاری شده در آن نمایش داده شود

عالم محضر خداست درمحضر خدا گناه نکنید حضرت امام (ره)

دوشنبه 5 دی 1390  4:15 PM
تشکرات از این پست
دسترسی سریع به انجمن ها