Skip to content

Instantly share code, notes, and snippets.

@fdask

fdask/apiplayer.html

Last active August 29, 2015 14:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save fdask/8c8ba2c5914bea714e6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save fdask/8c8ba2c5914bea714e6d to your computer and use it in GitHub Desktop.
Download ZIP
A one page HTML/JS app to test API endpoints. Saves data to cookies or is.gd shortlinks.
Raw
apiplayer.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>API Player</title>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<style>
textarea {
width: 500px;
height: 300px;
}
fieldset {
height: 600px;
}
#link {
width: 500px;
}
#response_headers {
height: 150px;
}
#url {
width: 500px;
}
#response,
#request {
width: 600px;
float: left;
}
</style>
<script>
/**
You will need to set up a proxy on the server you run this to get around javascript client security.
upstream ssl_api {
server domain.com:port;
}
location /proxy {
rewrite ^/proxy/(.*) /$1 break;
proxy_pass https://ssl_api;
}
port is required. change https to http if not using ssl/443
change the url parameter in the .ajax() settings to match your location above
**/
function setCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(name + "=");
if (c_start != -1) {
c_start = c_start + name.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
function getSaveData() {
return {
username: $("#username").val(),
password: $("#password").val(),
url: $("#url").val(),
request_body: $("#request_body").val(),
request_content_type: $('input[name=request_content_type]:checked').val(),
response_content_type: $('input[name=response_content_type]:checked').val(),
verb: $("#verb :selected").val()
};
}
function setData(data) {
$("#username").val(data.username);
$("#password").val(data.password);
$("#url").val(data.url);
$("#request_body").val(data.request_body);
$('input[name=request_content_type][value=' + data.request_content_type + ']').prop('checked', 'checked');
$('input[name=response_content_type][value=' + data.response_content_type + ']').prop('checked', 'checked');
$('#verb option[value=' + data.verb + ']').prop('selected', 'selected');
}
$(document).ready(function () {
$("#cookieClear").click(function () {
setCookie("apiplayer", "", -1);
});
$("#cookieLoad").click(function () {
var c = getCookie("apiplayer");
if (c.length) {
// decode the cookie
var savedData = JSON.parse(c);
// populate the form fields
setData(savedData);
}
});
$("#formClear").click(function () {
$("#username").val("");
$("#password").val("");
$("#url").val("");
$("#request_body").val("");
$('input:radio[name=request_content_type][value=json]').prop('checked', 'checked');
$('input:radio[name=response_content_type][value=json]').prop('checked', 'checked');
$('#verb option:first').prop('selected', 'selected');
});
$("#shareRequest").click(function () {
// put together the data string
var saveData = getSaveData();
if (!$("#sharePassword").prop("checked")) {
saveData.password = "";
}
var url = document.URL + "?data=" + encodeURIComponent(JSON.stringify(getSaveData()));
$.ajax({
method: "post",
url: "http://is.gd/create.php",
data: {
format: "json",
url: url
},
dataType: "json",
error: function (xhr, status, e) {
console.log("error: " + e);
},
success: function (data, status, xhr) {
if (data.shorturl) {
$("#link").val(data.shorturl);
}
},
complete: function (xhr, status) {
console.log(status);
}
});
});
$("#send").click(function () {
// save the data into cookies
if ($("#saveDataCheckbox").prop('checked')) {
setCookie("apiplayer", JSON.stringify(getSaveData()));
}
$("#response_data").val("");
$("#response_headers").val("");
var reqtype = $("input[name=request_content_type]:checked").val();
var restype = $("input[name=response_content_type]:checked").val();
$.ajax({
contentType: "application/" + reqtype,
dataType: restype,
data: $("#request_body").val(),
headers: {
"Accept": "application/" + restype,
},
username: $("#username").val(),
password: $("#password").val(),
type: $("#verb :selected").val(),
url: "/proxy" + $("#url").val(),
error: function (xhr, status, e) {
console.log("error: " + e);
},
success: function (data, status, xhr) {
var output = "";
if (restype == "json") {
output = JSON.stringify(data, null, ' ');
} else if (restype == "xml") {
output = new XMLSerializer().serializeToString(data);
} else {
output = data;
}
$("#response_data").val(output);
},
complete: function (xhr, status) {
console.log(status);
$("#response_headers").val(xhr.getAllResponseHeaders());
}
});
});
// see if we have passed data
var curUrl = window.location.href;
var strPos = curUrl.indexOf("?data=");
if (strPos != -1) {
// parse and load the passed data
var data = JSON.parse(decodeURIComponent(curUrl.slice(strPos + 6)));
setData(data);
} else {
// otherwise load the cookie
$("#cookieLoad").trigger("click");
}
});
</script>
</head>
<body>
<h1>API Player</h1>
<button type='button' id='cookieClear'>Clear Cookies</button>
<button type='button' id='cookieLoad'>Load Cookies</button>
<button type='button' id='formClear'>Clear Form</button>
<button type='button' id='shareRequest'>Share Request</button> <input type='text' name='link' id='link' />
<input type='checkbox' id='sharePassword' /> <label for='sharePassword'>Include password?</label>
<br/>
<div id='request'>
<fieldset id='request_fieldset'>
<legend>Request</legend>
<label for='username'>Username</label>
<input type='text' name='username' id='username' /><br/>
<label for='password'>Password</label>
<input type='text' name='password' id='password' /><br/>
<label for='verb'>HTTP VERB</label>
<select name='verb' id='verb'>
<option value='get'>GET</option>
<option value='post'>POST</option>
<option value='put'>PUT</option>
<option value='delete'>DELETE</option>
</select><br/>
<label for='url'>URL</label>
<input type='text' name='url' id='url' value='' /><br/>
<label for='request_body'>Body</label><br/>
<textarea id='request_body'></textarea><br/>
<input type='radio' name='request_content_type' value='xml'> XML
<input type='radio' name='request_content_type' value='json' checked='checked'> JSON<br/>
<br/>
<label for='saveDataCheckbox'>Save Data to Cookies</label>
<input type='checkbox' id='saveDataCheckbox' /><br/>
<br/>
<button type='button' id='send'>Send</button>
</fieldset>
</div>
<div id='response'>
<fieldset id='response_fieldset'>
<legend>Response</legend>
<label for='response_headers'>Headers</label><br/>
<textarea id='response_headers'></textarea><br/>
<label for='response_data'>Body</label><br/>
<textarea id='response_data'></textarea><br/>
<input type='radio' name='response_content_type' value='xml'> XML
<input type='radio' name='response_content_type' value='json' checked='checked'> JSON<br/>
</fieldset>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment