レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

簡易HTTPツール

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"
		integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
		crossorigin="anonymous"></script>
</head>
<body>
	<div>host:<input id="req_host" type="text" value="http://localhost:8080"></div>
	<div>path:<input id="req_path" type="text" value="/bookshop/ajaxtest"></div>
	<div>method:<input id="req_method" type="text" value="GET"></div>
	<div>
		message body:
		<textarea id="req_body"></textarea>
	</div>
	<div>
		<button id="req_button">送信</button>
	</div>
	<div id="response_disp">
	</div>
<script type="text/javascript">
$("#req_button").on("click",(e)=>{
	let host = $("#req_host").val();
	let path = $("#req_path").val();
	let method = $("#req_method").val();
	let body = $("#req_body").val();
	$.ajax({
		url : host + path,
		dataType: "json",
		method: method
	},body).then( e =>{
		console.log(e);
		$("#response_disp").append(JSON.stringify(e));
	}).catch( e =>{
		console.log(e.statusText , e.responseJSON)
		alert(e.statusText + " " + e.responseJSON);
	})
});
</script>
</body>
</html>