JavaScriptのみで非同期通信

チェックボックスの状態を取得し、apiで表示を変更するサンプル

async function entertainer_api() {
	api_val = getValue("api_val");
	let form = new FormData();
	form.append("api_val", api_val);
	const url = "/api.php";
	await fetch(url, {
		method: 'POST',
		body: form,
	})
	.then(response => response.json())
	.then(data => {
		var update_ul = document.getElementById("re_ul");
		update_ul.innerHTML = "";
		if(data.retuen_list) {
		  re_ul.innerHTML = data.retuen_list;
		}
	})
	.catch(error => {
		console.error('通信に失敗しました', error);
	});
}

function getValue(classname) {
	var checks = document.getElementsByClassName(classname);
	var str = '';
	for ( i = 0; i < checks.length; i++) {
		if ( checks[i].checked === true ) {
			if(i > 0) {
				str += ",";
			}
			str += checks[i].value;
		}
	}
	return str;
}