Как переписать ajax-запрос на чистый js (XMLHttpRequest)?

Question

[Сергей]

Как переписать этот код на ванильный js? В частности, интересует как и в каком виде передавать объект data, используя XMLHttpRequest с методом POST.

$.ajax({
	method: 'POST',
	url: url,
	dataType: 'json',
	data: {
		search: value
	},
	success: function(data) {
		console.log(data);
	}
});

Comments

[origami1024]

объект data передается как стринг через JSON.stringify и парситься на другом конце

[Сергей]

В качестве ответа мне приходит html-код страницы поиска, а не его результаты. Не знаете, почему так происходит?

Answer 1

[Иван Иванов]

https://good-code.ru/ajax-zapros/
Ну да, погуглить за вас нам, конечно же, не лень

Answer 2

[abberati]

Используйте fetch, забудьте про xhr

Comments

[When you dont want to litter on stackoverflow]

Я искал этот коммент! И обёртка ajax в jq это по сути уже тоже костыль, вообще fetch очень удобная штука....

[abberati]

Andriy Kosmenyuk, fetch — это одна из имплементаций ajax

[When you dont want to litter on stackoverflow]

abberati, Я имел введу обёртку из jq - AJAX

Answer 3

[Dima Polos]

var data = JSON.stringify({ search: value });
var xhr = new XMLHttpRequest();
xhr.open( 'POST', url );
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
xhr.send( data );
xhr.addEventListener( 'readystatechange', function(){
  if( xhr.readyState !== 4 ) return;
  if( xhr.status === 200 ){
    console.log( xhr.responsetext ); // ответ в консоль
  } else {
    console.log( xhr.statusText );
  }
});

||

async () => {
const req = await fetch( url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  },
  body: JSON.stringify({ search: value })
});
if(  req.ok){
  const res = await req.json(); // .text(), .blob()...
  console.log( res ); // ответ в консоль
}
}

Comments

[Сергей]

В качестве ответа мне приходит html-код страницы поиска, а не его результаты. Не знаете, почему так происходит?

[Dima Polos]

Сергей, спрашивайте бекенд, может адрес неправильный, а может с бека Вам шлют кусок разметки, вместо json или чего Вы там ожидаете в ответ.