Отправка данных формы без перезагрузки страницы на Javascript

В этом материале мы разберём как с помощью Javascript отправить данные с формы страницы без её перезагрузки или редиректа.

Для того чтобы понять, как работает такого рода скрипт, давайте его сделаем. Для работы скрипта нам нужно 2 файла. В первом будут храниться сама страница (формы, код скрипта), а второй будет просто обработчиком данных, которые отправятся с форм.

Итак, первый файл, имя которого не имеет значения:

<script type="text/javascript">
function getXmlHttp(){
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function too() {
var a = document.getElementById("onea").value;
var b = document.getElementById("twoa").value;
var xmlhttp = getXmlHttp();
xmlhttp.open('POST', 'action.php', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("one=" + encodeURIComponent(a) + "&two=" + encodeURIComponent(b));
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("outdata").innerHTML = xmlhttp.responseText;
}
}
};
}
</script>
<label><b>Число 1: </b></label>
<select size="1" name="one" style="height: 30px;" id="onea">
<option value="1">1</option>
<option value="2">2</option>
<option selected value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label><b>Число 2: </b></label>
<input type="text" id="twoa" name="twoa">
<br>
<input type="button" value="Умножить" onclick="too()">
<span id="outdata"></span>

Как вы можете заметить, что в HTML коде даже нет тегов <form>,</form>, потому что они не нужны для работы скрипта. Скрипт на примере отправляет файлу action.php две POST переменные one и two. Теперь дело за малым - создать второй файл action.php и принять эти переменные.

Ну и теперь сам файл action.php:

<?
if($_POST['one'] AND $_POST['two']){
echo $_POST['one']*$_POST['two'];}
?>

После того как переменные обработались файлом action.php, всё что этот файл выведет, на основе принятых переменных, отправляется обратно яваскрипту, который в свою очередь записывает весь вывод action.php в тэг с id=outdata, в данном случае этот тег span. В данном конкретном случае данными выведенными файлом action.php, будет являться результатом умножения отправленных 2 чисел.

Работа данного скрипта проста как апельсин. Если вы разберётесь в нём, то сможете много чего полезного сделать на основе его работы.

Работающий пример вы можете скачать здесь.

Способ отпраки - получения данных, который мы разобрали  этой статье пременим также для других разнообразных задач и не имеет каких-либо рамок в использовании.


You have no rights to post comments

Карта сайта