Виникла ідея написати "скрипт" який буде на основі HTML елементу FORM створювати AJAX запити для відправки даних з форми на сервер. Тобто додавати до кожної форми на веб-сторінці обробник події onsubmit, який буде формувати з даних форми AJAX запит на сервер.
Простішими словами відправляємо дані форми на сервер без перезавантаження веб-сторінки.
HTML форму вказуємо згідно стандарту, з атрибутами action, method і т.д.
Якщо необхідно Вам обробити результат отриманий від сервера після відправки то необхідно додати подію onload до елементу FORM, в якості єдиного параметру буде передаватися текст відповіді XMLHttpRequest.responseText.
function formToAjax(){
for(i=0,len=document.forms.length;i<len;i++)
document.forms[i].onsubmit=function(e){
var dani='';
for(a=0,b=this.elements.length;a<b;a++){
if(this.elements[a].hasAttribute('name')==true)
switch(this.elements[a].getAttribute('type')){
case 'radio':
case 'checkbox':
if(this.elements[a].checked==false)continue;
default:
dani+=(dani==''?'':'&')+this.elements[a].getAttribute('name')+'='+this.elements[a].value;
break;
}
}
var xhr = new XMLHttpRequest(), method=this.getAttribute('method'), url=this.getAttribute('action');
xhr.form=this;
if(method==null)method='get';
method=method.toLowerCase();
if(url==null)url='';
if(method=='get')url+=(url.indexOf('?')==-1?'?'+dani:'&'+dani);
xhr.open(method,url,true);
if(method=="post")xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange=function(){
if(this.readyState==4 && this.status==200){
if(this.form.onload)this.form.onload( this.responseText );
}
}
xhr.send((method=='get'?null:dani));
return false;
}
}
window.addEventListener('load',formToAjax);
Приклади застосовування:
<form id="f" action="http://яваскрипт.укр/ajax.php?act=test_post" method="post">
<input type="text" name="user_name" required>
<select name="vik"><option value="23">23</option><option value="27">27</option></select>
<input type="radio" name="st" value="man">чоловік
<input type="radio" name="st" value="woman">жінка
<input type="checkbox" name="pr" value="true">згідний з умовами
<input type="submit" value="відправити">
</form>
Приклад форми з вказаною подією onload:
<form action="/ajax.php?act=test_get" onload="alert('Дані відправлені успішно!')">
<input type="password"><input type="submit">
</form>
Приклад додавання функції яка отримує дані від сервера:
<form id="test_form" action="/ajax.php?act=test_post" method="post"><input name="text" value="JavaScript"><input type="submit"></form>
document.getElementById('test_form').onload=function(res){alert('отримані дані від сервера: '+res);}