Отправка POST запроса без перезагрузки страницы с использованием Ajax

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

Для разработки нам потребуется библиотека jQuery взять ее можно на официальном сайте (jquery.com), для оптимизации отдаваемого трафика можно использовать сжатую версию jQuery.min.

Создадим простейшую html страничку с формой для отправки данных:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Отправка формы Ajax</title> <script type="text/javascript" src="/jQuery.min.js"></script> <script type="text/javascript" src="/ajax.js"></script> </head> <body> <form action="" id="myform"> <input type="text" name="mydata" id="mydata" /> <input type="text" name="mydata1" id="mydata1" /> <input type="button" onclick="send();" value="Отправить" /> </form> <div id="result"></div> </body> </html>

Итак теперь рассмотрим ее по подробнее, между тегами head у нас происходит подключение библиотеки jQuery а в файлике ajax.js содержатся функции которые и отправляют данные которые будут выводиться в специально отведенном div’е имеющим id result.

Рассмотрим содержимое файла ajax.js

function send() { //Получаем параметры var data = $('#mydata').val(); var data1 = $('#mydata1').val(); // Отсылаем паметры $.ajax({ type: "POST", url: "/SendData.php", data: "data="+data+"&data1="+data1, // Выводим то что вернул PHP success: function(html) { //предварительно очищаем нужный элемент страницы $("#result").empty(); //и выводим ответ php скрипта $("#result").append(html); } }); }

Разберем функцию send по подробнее.

Строка:

var data = $(‘#mydata’).val();
в ней нужно описать все переменные которые мы хотим отправить, однако можно воспользоваться стандартной функцией .serialize() которая это все сделает за вас, однако если вы передаете 1-2 переменных, то можно сделать это и руками.

Далее мы подготавливаем все для отправки запроса, для этого нам нужно указать:

type — тип отсылаемого запроса,
url — путь к скрипту который должен принять данные,
data — строка запроса в которой отправляем данные
Если мы хотим просто отправить запрос и ничего не выводить, то success можно не указывать, но если все же нужно что то сделать в случае успешной отправки запроса, а как правило бывает именно так, то указываем какая функция должна выполнится после удачной отправки запроса. В нашем случае мы сначала очищаем div с id result

$("#result").empty();

а затем помещаем в него то что нам вернул файил SendData.php

$("#result").append(html);

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

<?php //Получаем данные $data = $_POST[data]; $data1 = $_POST[data1]; //Так как все данные приходят в кодировке UTF при необходимости //их можно/нужно конвертировать в нужную, но мы этого делать не будем //$data = iconv("utf-8", "windows-1251", $data); //$data1 = iconv("utf-8", "windows-1251", $data1); /* тут можно делать все что угодно с полученными данными, а мы их просто выведем на печать. */ echo $data; ?>

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