Ajax w vanilla JS, wysyłanie formularza

pytanie zadane 27 stycznia 2018 w JavaScript przez dziedziu Początkujący (370 p.)

Cześć :)

Mam pytanie odnośnie działania AJAX. Chciałbym wysyłać formularz ze strony za pomocą AJAX w vanilla JS. Dodanie preventDefault w początkowej części kodu powoduje, że formularz się nie wysyła, pominięcie tego powoduje przekierowanie do pliku .php. Co powinienem zrobić żeby formularz wysyłał się bez przeładowania strony?

var form = document.querySelector('.form');
form.addEventListener('submit', function (e) {
	
	e.preventDefault();
	
	var name = document.querySelector('.form-input--name').value;
	var phone = document.querySelector('.form-input--phone').value;
	var email = document.querySelector('.form-input--email').value;
	var message = document.querySelector('.form-input--message').value;
	
var data = JSON.stringify(
		{
			name:name, 
			phone:phone,
			email:email,
			message:message
		}
	);


	var request = new XMLHttpRequest();
	request.open('POST', 'contact.php', true);
	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
	request.send(data);

});

komentarz 27 stycznia 2018 przez niezalogowany

Na jakiej podstawie stwierdzasz, że się nie wysyła?

komentarz 27 stycznia 2018 przez dziedziu Początkujący (370 p.)

Bo nie dostaję maila. Bez preventDefault maila dostaję, ale przekierowuje mnie do contact.php. Teraz tak się zastanawiam, czy wysyłanie AJAXem do PHP nie wymaga przypadkiem jakiegoś specjalnego odbierania tego jsona? Czy normalnie za pomocą np. $_POST['name']; można to robić?

komentarz 27 stycznia 2018 przez rafal.budzis Szeryf (85,700 p.)

POST wysyłasz tak samo jak GET w linku

klucz=wartosc&klucz2=wartosc2

więc musisz jakoś uzyskać takiego stringa

var data = "name=" + name + "&phone=" + phone;

Dodatkowo jak klikniesz F12 w zakładce Network powinno się coś pojawić jak wyślesz dane AJAXem możesz tam zobaczyć to powiedział na te dane PHP ;)

komentarz 27 stycznia 2018 przez dziedziu Początkujący (370 p.)

A w którym miejscu? Nigdzie nie widzę wgl. tych wysyłanych danych :(

1	komentarz 27 stycznia 2018 przez ScriptyChris Mędrzec (190,190 p.) Zerknij do zakładki Network w narzędziach developerskich. Tam znajdziesz requesty i szczegółowe informacje o nich, m.in. właśnie parametry requesta.