8 мая, 2014 
Alexjc 
Довольно часто требуется динамически отправить данные на сервер, без перезагрузки страницы. Говорят, что раньше использовали невидимые фреймы, и в них отправляли данные. К сожалению, об этом сохранилось очень мало информации… Мы пойдем другим путем, и воспользуемся технологией Ajax.
Для отправки формы мы будем использовать фреймворк JQuery.
Создадим 2 файла, первый будет сама форма – index.html, второй form.php – обработчик формы.
Файл index.html (не забудьте скачать и подключить библиотеку JQuery):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajax - Отправка формы при помощи JQuery | www.webinit.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> /** * Функция для отправки формы средствами Ajax * @author Дизайн студия ox2.ru **/ function AjaxFormRequest(result_id,form_id,url) { jQuery.ajax({ url: url, //Адрес подгружаемой страницы type: "POST", //Тип запроса dataType: "html", //Тип данных data: jQuery("#"+form_id).serialize(), success: function(response) { //Если все нормально document.getElementById(result_id).innerHTML = response; }, error: function(response) { //Если ошибка document.getElementById(result_id).innerHTML = "Ошибка при отправке формы"; } }); } </script> </head> <body> <div style="border: 1px solid red; width: 220px; height: 80px; padding: 10px;" id="result_div_id"> Тут будет вывод нашей формы<br/> <br/> <em>www.webinit.ru</em> </div> <br/><br/> <form method="post" action="" id="form_id"> Имя: <input type="text" name="name" value="Ваше имя" /><br/> Телефон: <input type="text" name="phone" value="Введите телефон" /><br/> Сайт: <input type="text" name="site" value="http://www.webinit.ru/" /><br/> <input type="button" value="Отправить" onclick="AjaxFormRequest('result_div_id', 'form_id', 'form.php')" /> </form> </body> </html> |
Файл form.php:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php /** * Обработчик формы * @author Дизайн студия ox2.ru */ //Если форма была отправленна, то выводим ее содержимое на экран if (isset($_POST["name"])) { //Данные отправляются в кодировке utf-8, поэтому конвертим в cp1251 echo "Ваше имя: " . iconv("utf-8", "cp1251", $_POST["name"]) . "<br/>"; echo "Ваш телефон: " . $_POST["phone"] . "<br/>"; echo "Ваш сайт: " . $_POST["site"] . "<br/>"; } ?> |
.
I thought of that, and I thought that my burglar hero, bernie rhodenbarr, would certainly offer the same suggestion if a friend called him in the firstessaywritinghelp.com/ middle of the night with that particular problem?
Posted in 