<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>