jQueryでajaxを使用したRestAPIの実行方法【jQuery】

■はじめに

jQueryを使用して、RestAPIを実行する方法を記載します。

ajaxを利用します。

■手順

まずは、ソースコードの全量は以下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function() {
$('#hello').click(function() {
$.ajax({
url: '[APIのURL]',
type: '[通信(GET,POST,DELETE)]',
dataType: 'json',
data: {"data": "a", "data2": "a"},
timeout: 3000,
}).done(function(data) {
console.log(data);
}).fail(function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest);
console.log(textStatus);
console.log(errorThrown);
});
});
});
</script>
</head>
<body>
<input type="button" id="hello" value="API実行">
</body>
</html>

以下に関しては、それぞれ適当な環境に切り替えてください。

[APIのURL]
[通信(GET,POST,DELETE)]
{"data": "a", "data2": "a"}