XMLHttpRequest отправка формы на сервер черзе Ajax

Рубрика: JavaScript, Дата: 4 July, 2017, Автор:

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

Сразу перейдем к коду

<!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

 

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 вызывает. Нужно для него специально делать свою инициализация. Эта функция как бы для всех браузеров делает инициализацию. Я ее не проверял, а просто выдрал из примеров кода. Возможно она даже не рабочаю.

 

var request = getHttpRequest();

Это идет инициализация в переменной request хранится новый объект XMLHttpRequest

 

request.onreadystatechange=function() {
  if (request.readyState == 4 && request.status == 200) {
  console.log("Response Received");
  console.log('request'+request.responseText);
  }
  }

Тут мы получаем данные что пришли от сервера, переменная request.resposeText хранит текстовый ответ

 

request.open("POST","http://test/handler.php",true);

Это делает запрос на наш сервер

 

var formData = new FormData( document.getElementById("form-id") );
  request.send(formData);

А тут в send у нас отправляются данные формы.

Отправка через wordpress

Для вордпресс  XMLHttpRequest  отправка формы на сервер черзе Ajax, нам нужно когда мы передаем форму, то туда передать и ‘action который будет обрабатывать это все дело.

formData.append("key", "value"); //insert additional value to array

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

XMLHttpRequest отправка формы на сервер черзе Ajax

 

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *