XMLHttpRequest отправка формы на сервер черзе Ajax бывает нужно сделать чисто на javascript. Через XMLHttpRequest это сделать оказалось просто. Коды что будут тут представлены я просто нагуглил и проверил, вроде все работает.
Как отправить через jQuery запрос на сервер, да еще чтобы file отправлялся смотрите тут Передача input type file на сервер через ajax
XMLHttpRequest отправка формы на сервер черзе Ajax, зачем это нужно делать если есть jQuery ?
Да вопрос хороший :). Опишу проблему. Бывают случаи когда jQuery подключен внизу. Он обычно и должен быть подключен внизу. А ваш например код подключается в средину страницы перед подключением jQuery и вы уже не можете вызывать функции jQuery потому что их не будет видно.
У меня такое случилось. Я загружал форму через Ajax. В этой форме есть google invisible reCaptcha. Мы делаем там явное подключение. Пришлось сделать перед формой вывод функций которые вызываются и после формы подключить загрузку API invisible google reCaptcha. Понятно что jQuery не будет работать и запрос нужно делать на чистом javascript используя XMLHttpRequest отправка формы на сервер черзе Ajax .
Код для XMLHttpRequest отправка формы на сервер черзе Ajax
Сразу перейдем к коду
|
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 45 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form id="form-id" action="/handler.php" method="POST" enctype="multipart/form-data"> <input id="my_file" type="file" name="my_file"> <br> <input id="my_name" type="text" name="my_name" value="my_name"> <input id="submit" type="submit" nme="submit"> </form> <script type="text/javascript"> function getHttpRequest() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } document.getElementById('submit').onclick=function(){ console.log('here'); var request = getHttpRequest(); request.onreadystatechange=function() { if (request.readyState == 4 && request.status == 200) { console.log("Response Received"); console.log('request'+request.responseText); } } request.open("POST","http://test/handler.php",true); // request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); var formData = new FormData( document.getElementById("form-id") ); request.send(formData); return false; } </script> </body> </html> |
Немножко опишем этот код.
Описание XMLHttpRequest отправка формы на сервер черзе Ajax
|
1 2 3 4 5 6 7 8 9 10 |
function getHttpRequest() { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } |
В функции getHttpRequest у нас идет инициализация объекта XMLHttpRequest. Браузер ie какой то там или все какой то там специльный axtiveX вызывает. Нужно для него специально делать свою инициализация. Эта функция как бы для всех браузеров делает инициализацию. Я ее не проверял, а просто выдрал из примеров кода. Возможно она даже не рабочаю.
|
1 |
var request = getHttpRequest(); |
Это идет инициализация в переменной request хранится новый объект XMLHttpRequest.
|
1 2 3 4 5 6 |
request.onreadystatechange=function() { if (request.readyState == 4 && request.status == 200) { console.log("Response Received"); console.log('request'+request.responseText); } } |
Тут мы получаем данные что пришли от сервера, переменная request.resposeText хранит текстовый ответ
|
1 |
request.open("POST","http://test/handler.php",true); |
Это делает запрос на наш сервер
|
1 2 |
var formData = new FormData( document.getElementById("form-id") ); request.send(formData); |
А тут в send у нас отправляются данные формы.
Отправка через wordpress
Для вордпресс XMLHttpRequest отправка формы на сервер черзе Ajax, нам нужно когда мы передаем форму, то туда передать и ‘action который будет обрабатывать это все дело.
|
1 |
formData.append("key", "value"); //insert additional value to array |
Используем код выше для добавления action, либо можно создать в форме скрытое поле action и ему присвоить значение нашего action. Я хочу как небудь на такое попробовать сделать.
