В этой статье рассматривается отправка такой формы на чистом JavaScript без использования дополнительных библиотек. Такую технологию принято называть Ajax, но на деле это не совсем так. Ajax расшифровывается как “асинхронный JavaScript и XML”, но в этом, как и во многих других случаях XML не используется. Тут применяются просто асинхронный JavaScript-запрос.
Например, имеем такую форму:
<form method='GET' action='form.php’>
<p>
<label for='ti'>Заголовок:</label>
<input type='text' name='title' id='ti'>
</p>
<p>
<label for='te'>Текст:</label>
<textarea name='text' id='te'></textarea>
</p>
<p>
<input type='submit' name='subm' value='Отправить'>
</p>
</form>
Первое, что нужно сделать для возможности ее отправки через асинхронный запрос — назначить обработчик соответствующего события. Это событие называется onsubmit. Назначить его можно как динамически, используя JavaScript, так и просто вписать в тег form. Для простоты реализуем второй вариант. Тогда тег form будет выглядеть так:
<form method=’GET’ action=’form.php’ onsubmit=’sendForm(event);’>
Тут назначено, чтобы при событии отправки формы вызывалась функция sendForm, которую еще предстоит написать. Однако, если оставить этот код таким, то вместе с вызовом функции sendForm всё равно произойдёт отправка формы стандартным образом. Для предотвращения этого в обработчике onsubmit надо вернуть значение false. В итоге получится следующее:
<form method='GET' action='form.php' onsubmit=' sendForm(event); return false; '>
Теперь необходимо написать функцию sendForm.
function sendForm(e)
{
let form=e.target;
let url=form.action;
let title=document.getElementById('ti').value;
let text=document.getElementById('te').value;
sendAjax(url,title,text);
}
Эта функция получает url-адрес для отправки, а также заголовок и текст из соответствующих полей формы. Затем она вызывает функцию sendAjax для отправки данных на сервер, которую тоже надо создать:
function sendAjax(url,title,text)
{
let req = createRequest();
alert(req);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) alert('Отправка формы выполнена');
}
}
req.open('GET',url+'?title='+title+'&text='+text,true);
req.send(null);
}
Эта функция получает объект запроса из функции getXmlHttp, назначает ей обработчик onreadystatechange, который вызывается при изменении состояния запроса. После этого она создает GET-запрос с нужными параметрами — передаваемым заголовком и текстом, а также их значениями и выполняет отправку запроса. В случае, если запрос отправлен успешно, то сработает этот код:
alert('Отправка формы выполнена');
При этом пользователю будет отображено окошко с сообщением.
Последнее, что нужно сделать — это создать функцию CreateRequest(). Она возвращает объект для ajax-запросов. Функция сделана такой для обеспечения кроссбраузерности и часто встречается в интернете.
function createRequest()
{
var Request = false;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (CatchException)
{
Request = new ActiveXObject('Msxml2.XMLHTTP');
}
}
if (!Request)
{
alert('Невозможно создать XMLHttpRequest');
}
return Request;
}
В итоге, полный текст страницы будет следующим:
<html>
<head>
<script>
function createRequest()
{
var Request = false;
if (window.XMLHttpRequest)
{
//Gecko-совместимые браузеры, Safari, Konqueror
Request = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
//Internet explorer
try
{
Request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (CatchException)
{
Request = new ActiveXObject('Msxml2.XMLHTTP');
}
}
if (!Request)
{
alert('Невозможно создать XMLHttpRequest');
}
return Request;
}
function sendAjax(url,title,text)
{
let req = createRequest();
alert(req);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if(req.status == 200) alert('Отправка формы выполнена');
}
}
req.open('GET',url+'?title='+title+'&text='+text,true);
req.send(null);
}
function sendForm(e)
{
let form=e.target;
let url=form.action;
let title=document.getElementById('ti').value;
let text=document.getElementById('te').value;
sendAjax(url,title,text);
}
</script>
</head>
<body>
<form method='GET' action='form.php' onsubmit=' sendForm(event); return false; '>
<p>
<label for='ti'>Заголовок:</label>
<input type='text' name='title' id='ti'>
</p>
<p>
<label for='te'>Текст:</label>
<textarea name='text' id='te'></textarea>
</p>
<p>
<input type='submit' name='subm' value='Отправить'>
</p>
</form>
</body>
</html>