Загрузка php скрипта без перезагрузки страницы

Описание:  Ajax, состоящий из HTML, технологии JavaScript™, DHTML и DOM, это замечательный подход, который помогает вам преобразовать тяжеловесные Web-интерфейсы в интерактивные Ajax-приложения.

Ниже приведу вам пример, как подгружать php скрипт в другой, без перезагрузки страницы. Это очень удобно, ведь конечному пользователю не надо будет ждать загрузки всей страницы, а надо будет подождать всего лишь загрузку отдельного скрипта, будь то регистрация пользователя, заполнение анкеты или форма для синонимизирования.

у нас есть 3 скрипта (3 не столь важен) index.php(основной скрипт), query.php(подключаемый скрипт), wait.php(картинка или надпись с ожиданием). также в query.php мы передадим два значения id="idfreesystextarea" и id="idkeysecret" методом POST

index.php

<script type='text/javascript' src='jquery.js'></script>

<form id="FormFreeSyn">

<textarea id="idfreesystextarea" name="freesystextarea" rows="18" cols="95" maxlength="200">Привет, просто смотрите как дела...</textarea>
<input id="idkeysecret" type="hidden" name="keysecret" value="alex leo" />    
<BR><BR>
<input type="submit" value="Отправить">
<BR><BR>
</form>

<div id="contentBody">
</div>


<script>
$(document).ready(function(){

$('#FormFreeSyn').submit(function(){

$.ajax({
type: "POST",
url: "wait.php",
data: "syntext="+$("#idfreesystextarea").val()+ "&"+ "keysecret="+$("#idkeysecret").val(),
success: function(html){
$("#contentBody").html(html);
}
});

str = document.getElementById('idfreesystextarea').value;
str = str.substring(0, 1500);
document.getElementById('idfreesystextarea').value = str;

$.ajax({
type: "POST",
url: "query.php",
data: "syntext="+$("#idfreesystextarea").val()+ "&"+ "keysecret="+$("#idkeysecret").val(),
success: function(html){
$("#contentBody").html(html);
}
});
return false;
});

});
</script>    
<hr/>


query.php
<?php
$syntext = strip_tags($_POST['syntext']);

$keysecret = strip_tags($_POST['keysecret']);
echo $syntext.'<BR>';
echo $keysecret;
?>


wait.php
<?PHP
echo '<div align="center">Обработка</div>';
?>


Немного поясню...
В index.php у нас есть строки <div id="contentBody"></div> в этот элемент будет вставлятся подключаемый скрипт. Переменные которые передаются в сторонний скрипт определяются не по name как в php, а по id элемента.


Поделиться: Сохранить