Skip to content

Instantly share code, notes, and snippets.

@geta6

geta6/index.html

Last active December 12, 2015 07:39
Show Gist options
  • Save geta6/4738619 to your computer and use it in GitHub Desktop.
Save geta6/4738619 to your computer and use it in GitHub Desktop.
Download ZIP
Public以下に配置するとなぜか動くっぽい、よくわからん
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>RESTEST</title>
<link rel='stylesheet' href='http://yui.yahooapis.com/3.8.1/build/cssreset/cssreset-min.css'>
<style>
html {
font:12px monospace;
background: #FBFBFB;
}
* {
box-sizing: border-box;
}
#header {
height: 50px;
background: #F1F1F1;
border-bottom: 1px solid #E8E8E8;
font: 12px Sans-Serif;
}
#header input[type=text] {
position: relative;
z-index: 200;
-webkit-appearance: none;
float: left;
display: block;
margin: 10px;
padding: 5px;
width: 400px;
height: 30px;
border: 1px solid #CCCCCC;
line-height: 20px;
}
#header input[type=button] {
-webkit-appearance: none;
float: left;
display: block;
margin: 10px 5px;
padding: 5px;
width: 63px;
height: 30px;
line-height: 20px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
}
#header input[type=button]:hover {
background: #F1F1F1;
cursor: pointer;
}
#footer {
margin: 25px 0;
}
.inner {
margin: 0 auto;
padding: 0 10px;
min-width: 740px;
width: 80%;
}
textarea {
-webkit-appearance: none;
display: block;
margin: 10px 0;
padding: 10px;
max-width: 100%;
min-width: 100%;
width: 100%;
height: 50px;
font: 11px monospace;
border: 1px solid #E6E6E6;
}
#response {
height: 200px;
}
#addr {
width: 600px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
</head>
<body>
<form action='.'>
<div id='header'>
<div class='inner'>
<input id='addr' type='text' placeholder='Request URI'>
<input class='send' type='button' value='GET'>
<input class='send' type='button' value='POST'>
<input class='send' type='button' value='PUT'>
<input class='send' type='button' value='DELETE'>
</div>
</div>
<div id='footer'>
<div class='inner'>
<input id='space' type='checkbox'> indent JSON
<textarea id='text' placeholder='Request parameter with JSON'></textarea>
<textarea id='request' disabled placeholder='Parsed request parameter'></textarea>
<textarea id='response' disabled placeholder='Response text'></textarea>
</div>
</div>
</form>
<script>
$(function(){
$('.send').on('click', function(){
var method = $(this).val();
var checked = $('#space').is(':checked');
try {
var json = JSON.parse($('#text').val());
var ajax = $.ajax($('#addr').val(), {
type: method,
data: JSON.parse($('#text').val()),
beforeSend: function () {
$('#request').val(method + '\n' + JSON.stringify(json, null, checked ? 2 : 0));
},
complete: function (res) {
headers = ajax.getAllResponseHeaders();
$('#response').val(method + ' ' + res.status + ' ' + res.statusText + '\n' + headers + '\n' + res.responseText);
}
});
} catch(e) {
$('#request').val(e.message);
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment