フォームデータをJSON形式でPOSTする

ついでにフォームコーディングとバリデーションも

jQuery + Ajax

https://api.jquery.com/jQuery.ajax/

jQuery(function($){

	$contactForm = $('#contact-form');

	// バリデーション

	// JSONデータ送信
	$contactForm.submit(function(ev) {
		ev.preventDefault();

		var data = {
			contact_type: $('input[name="contact_type"]').val(),
			nickname: $('input[name="nickname"]').val(),
			xxx: [{
				xxxx: $('input[name="address.postcode"]').val(),
				xxxx: $('input[name="address.prefecture"]').val(),
			}]
		}

		$.ajax({
			method: "POST",

			url: "./receive.php",
			dataType: 'json',
			contentType: 'application/json',
			data: JSON.stringify(data)
		})
		.done(function(data) {
			alert(JSON.stringify(data));
			window.location.href = "/contact/thankyou/";
		})
		.fail(function(err) {
			window.location.href = "/contact/error/";
		});
	});
});

JavaScriptのfetch() メソッド使う方法

const formEl = document.querySelector('.form');
formEl.addEventListener('submit', event => {
	event.preventDefault();

	const formData = new FormData(formEl);
	const data = Object.fromEntries(formData);

	fetch('https://reqres.in/api/users', {
		method: 'POST',
		headers: {
			'Content-Type': 'application/json'
		},
		body: JSON.stringify(data)
	})
	.then(res => res.json())
	.then(data => console.log(data))
	.catch(error => console.log(error));
});

AXIOS を使う方法

formEl.addEventListener('submit', event => {
	event.preventDefault();

	const formData = new FormData(formEl);
	const data = Object.fromEntries(formData);
	axios.post('https://reqres.in/api/users', data)
	.then(function (response) {
		console.log(response.data);
	})
	.catch(error => console.log(error));
});

HTTP レスポンスステータスコード

情報レスポンス (100–199)
成功レスポンス (200–299)
リダイレクトメッセージ (300–399)
クライアントエラーレスポンス (400–499)
サーバーエラーレスポンス (500–599)

https://developer.mozilla.org/ja/docs/Web/HTTP/Status