Извеждане на съдържание с AJAX без рефреш

Автор: admin

Това е преработен код но тъй като е полезен го поствам в категория „А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>

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

1. Зареждане на информацията чрез 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/