Извеждане на съдържание с AJAX без рефреш
26-10-2009
Това е преработен код но тъй като е полезен го поствам в категория "Аjax", а не в "Кодове".
Демо може да видите по-надолу във видеото.
При натискане на линк от менюто се include-ват различни файлове и съдържанието им (всичко което върнат) се зарежда в определен див без рефреш.

В кода по-долу се вижда, че при натискане на някое от менютата се изпраща заявка към
скрипта rpc.php и в зависимост от post данните (1,2,3 и т.н.) той inlude-ва различни файлове и връща различен резултат. Този резултат се зарежда в
<div id="mainAreaLoading" class="mainAreaLoading" style="display: none">

Ето го скрипта index.html

<html>
<head>
<title>Nodstrum - Load External Content Using Javascript and PHP</title>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251"/>

<!-- Import Javascript Libraries -->
<script src="js/lib/prototype.js" type="text/javascript"></script>
<script src="js/src/scriptaculous.js" type="text/javascript"></script>

<!-- Our JS Functions -->
<script type="text/javascript">
function startLoading() {
Element.show('mainAreaLoading');
Element.hide('mainAreaInternal');
}
function finishLoading() {
Element.show('mainAreaInternal');
setTimeout("Effect.toggle('mainAreaLoading');", 0);
}

function loadContent(id) {
startLoading();
new Ajax.Updater('mainAreaInternal', 'rpc.php', {method: 'post', postBody:'content='+ id +''});
finishLoading();
}
</script>

<!-- CSS -->
<style>
body {
font-family: Tahoma;
font-size: 12px;
}

.mainAreaInternal
{
width: 500px;
height: 300px;
z-index: 0;
}

.mainAreaLoading
{
width: 500px;
height: 300px;
z-index: 1;
}
</style>

</head>
<body>
<img src="img.png" />
<table>
<tr>
<td valign="top" width="200">
<a href="javascript:loadContent(1);">Меню 1</a><br/><br/>
<a href="javascript:loadContent(2);">Меню 2</a> <br/><br/>
<a href="javascript:loadContent(3);">Меню 3</a> <br/><br/>
<a href="javascript:loadContent(4);">Меню 4</a> <br/><br/>

</td>
<td>
<!-- Navigation End -->
<div id="mainArea">
<div id="mainAreaInternal" class="mainAreaInternal">
Текст който се появява при първоначално зареждане.
</div>
</div>
<!-- End Main Area Internal -->
<div id="mainAreaLoading" class="mainAreaLoading" style="display: none">

<span style="position: relative; top: 100px; left: 100px">

</span>

</div>
<!-- End Main Area -->
</td>
</tr>
</table>

</body>
</html>


и скрипта rpc.php


<?php
$content = $_POST['content'];


if($content==1)
{
include "file1.php";
}
elseif($content==2)
{
include "file2.php";
}


elseif($content==3)
{
include "file3.php";
}
else
{
include "file4.php";
}


?>



При натискане на меню 1 се зарежда файла file1.php
При натискане на меню 2 се зарежда файла file2.php
При натискане на меню 3 се зарежда файла file3.php
При всичко останало се зарежда file4.php


От ТУК изтеглете файловете и тествайте.





Прилагам още 2 възможности:
1.Зареждане на информацията не при натискане на линка,
а при преминаване на мишката върху линка ( onmouseover ).
Достатъчно е да направите линка така:

<a href="javascript:loadContent(1);" onmouseover="loadContent(1)">Меню 1</a>


От ТУК изтеглете файловете и тествайте.

2. Зареждане на информацията чрез select меню:


<form action="" method="POST">
<select onchange="javascript:loadContent(this.value);">
<option value="4">--------------</option>
<option value="1">MENU 1</option>
<option value="2">MENU 2</option>
<option value="3">MENU 3</option>
<option value="4">MENU 4</option>
</select>
</form>



От ТУК изтеглете файловете и тествайте.

Кодовете са преработена версия на http://nodstrum.com/2007/02/27/ajaxcontentload/


/ Трябва да сте регистриран за да напишете коментар /
От: koko92_national
21:01 26-10-2009
Браво супер си! Точно това ми трябваше!
От: proba
22:44 26-10-2009
Благодаря за кода. Много е практичен , удбен и лесно се работи с него :)
От: Dodo1987
20:35 28-10-2009
Урока е добър, браво, но имам един голям проблем.
Не работи под Opera 9.50 и Chrome, а върви само под Mozilla.
Някакви идей от какво може да е? В хоста са ми файловете - не е от това.
От: admin
20:44 28-10-2009
Не виждам как така не работи под chrome или под Opera.
Този код работи на всичко. Пробвал съм го на всички браузери
и дори и на IE 5.5 .
Ако не работеше под който и да е браузър или версия аз нямаше да го ползвам в web tourist.
Търси проблема другаде.
От: zv3zda7a
10:11 31-10-2009
Може ли да стане на phpbb2/3 ?
От: MetalSky
13:57 13-05-2010
Админе,коя е тази програмка която ползваш за редакция на кода?
От: webdeveloper
2:40 11-07-2010
Защо си мисля, че това ще отрази зле на резултатите ми в гугъл..?
От: sharky_design
15:41 18-08-2010
Много добър урок админе мерси за урока. {}
1