API 테스트 (JSON 형식으로 POST)에 사용할 수있는 범용 HTML 양식
좋은 가감 매회 만드는 것 귀찮기 때문에 범용적인 것을 만들었습니다!
화면 이런 느낌
포인트!
add 로 추가할 수 있다 [] 로 배열에도 대응 출처
api_test.html 등 적절한 파일 이름으로 저장하여 사용하십시오.
<html>
<head>
</head>
<body>
<h1>JSONでデータを送信する</h1>
<p>Url: <input type="text" id="url" name="url" size="100" value="https://example.com/api/hoge"></p>
<p>Method: <input type="text" id="method" name="method" size="10" value="post"></p>
<p>Parameter:</p>
<div id="input-param">
<p>
<input type="text" class="param-key" size="10" value="name">
<input type="text" class="param-value" size="30" value="hoge fuga">
</p>
<p>
<input type="text" class="param-key" size="10" value="email">
<input type="text" class="param-value" size="30" value="[email protected]">
</p>
<p>
<input type="text" class="param-key" size="10" value="prefecture[]">
<input type="text" class="param-value" size="30" value="東京都">
</p>
<p>
<input type="text" class="param-key" size="10" value="prefecture[]">
<input type="text" class="param-value" size="30" value="神奈川県">
</p>
<template id="input-template">
<p>
<input type="text" class="param-key" size="10" value="">
<input type="text" class="param-value" size="30" value="">
</p>
</template>
</div>
<p><button id="add" type="button">add</button></p>
<p><button id="submit" type="button">submit</button></p>
<textarea id="response" cols=120 rows=10 disabled>Response Values</textarea>
</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#add").click(function () {
let clone = document.importNode(document.querySelector('#input-template').content, true);
document.querySelector('#input-param').appendChild(clone);
});
$("#submit").click(function () {
$("#response").html("");
let url = $("#url").val();
let type = $("#method").val();
let param = {};
if (type.match(/get/i)) {
$(".param-key").each(function (i, o) {
param[$(o).val()] = $(".param-value").eq(i).val();
});
} else {
$(".param-key").each(function (i, o) {
// 配列をよしなに対応
if ($(o).val().indexOf('[]') != -1) {
let key = $(o).val().replace('[]', '');
if (param[key] == undefined) {
param[key] = [];
}
param[key].push($(".param-value").eq(i).val());
} else {
param[$(o).val()] = $(".param-value").eq(i).val();
}
});
param = JSON.stringify(param);
}
// console.log(param);
// return;
$.ajax({
type: type,
url: url,
data: param,
contentType: 'application/json',
dataType: 'json',
scriptCharset: 'utf-8',
success: function (data) {
console.log("success");
console.log(data);
$("#response").html(JSON.stringify(data));
},
error: function (data) {
console.log("error");
console.log(data);
$("#response").html(JSON.stringify(data));
}
});
});
});
</script>
</html>
참고
Reference
이 문제에 관하여(API 테스트 (JSON 형식으로 POST)에 사용할 수있는 범용 HTML 양식), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naoqoo2/items/4ecfe2d0922215850965텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
