XMLHttpRequest отправляет метаданные, но не данные формы

#javascript #xmlhttprequest

#язык JavaScript #xmlhttprequest

Вопрос:

У меня есть XMLHttpRequest, который я хочу использовать для отправки данных из своей формы. Вот мой код:

 var mc_xhr = new XMLHttpRequest(); mc_xhr.open(  "POST",  "https://webhook.site/58493d5a-9b8d-4300-875b-8f4d5ec6665b" ); mc_xhr.setRequestHeader("Content-Type", "application/json"); mc_xhr.send(JSON.stringify("test-string"));  

Это действительно отправляет запрос с метаданными, такими как источник и ссылка, но он не содержит указанной строки текста.

Кто-нибудь знает, что мне нужно сделать, чтобы отправить текстовую строку с запросом?

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

1. Как вы определили, что данных формы нет? Вы смотрели инструмент разработчика сети браузера, чтобы проверить фактическое содержимое запроса?

Ответ №1:

Ты тоже можешь сделать это вот так. Функция xmlHttp обрабатывает создание объекта XMLHttpRequest, который будет работать в старых браузерах так же хорошо. Вторая функция, fetchTask, — это то, что на самом деле выполняет отправку. Чтобы использовать его просто, укажите свой объект формы в качестве аргумента.

 function xmlHttp() {  if (window.XMLHttpRequest) { // Mozilla, Safari, ...  xhr = new XMLHttpRequest();  } else if (window.ActiveXObject) { // IE  try {  xhr = new ActiveXObject("Msxml2.XMLHTTP");  } catch (e) {  try {  xhr = new ActiveXObject("Microsoft.XMLHTTP");  } catch (e) {}  }  }   if (!xhr) {  console.log('Giving up :( Cannot create an XMLHTTP instance');  return false;  } }   // The function that takes the xmlHttp function, send your data and uses the response function fetchTask(frmElement) {  xmlHttp();  xhr.onload = function() {  const  rsp = JSON.parse(xhr.responseText)  }  xhr.open(frmElement.method, frmElement.action, true)  xhr.send(new FormData(frmElement))  return false  }  // Grab the form to be sent taskForm = document.querySelector('#task-form')  // Do the actual sending fetchTask(taskForm)  

Ответ №2:

Если вы хотите отправить json на сервер, вы должны предоставить допустимую структуру json для метода xhr.send следующим образом:

 let xhr = new XMLHttpRequest(); let body= JSON.stringify({  name: "Saeed",  family: "Shamloo" }); xhr.open("POST", '/targetURL') xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8'); xhr.send(body);  

Если вы хотите отправить значения из формы a, вы можете использовать встроенный объект FormData. подобный этому:

 lt;form name="person"gt;  lt;input name="name" value="Saeed"gt;  lt;input name="family" value="Shamloo"gt; lt;/formgt;  lt;scriptgt;  // pre-fill FormData from the form  let formData = new FormData(document.forms.person);  // add one more custom field  formData.append("middle", "middle-name");  let xhr = new XMLHttpRequest();  xhr.open("POST", "/targetURL");  xhr.send(formData); lt;/scriptgt;  

Вы можете проверить инструмент разработчика сети браузера, чтобы определить, какие значения были отправлены на сервер.