JSFiddle - React, Tailwind, and code Playground
by militellovincenzo
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
<div class="nav">
<div class="btn btn-success" id="btnGet">Get</div>
<div class="btn btn-danger" id="btnPost">Post</div>
<div class="btn btn-default" id="btnClear">Clear</div>
</div>
<div class="row">
<div class="col-xs-4">Status Code</div>
<div class="col-xs-6" id="resultcode">-</div>
</div>
<div class="row">
<div class="col-xs-4">Data</div>
<div class="col-xs-6" id="resultData">-</div>
</div>
</div>
JavaScript
$(function () {
jQuery.support.cors = true;
//put the URL of the API server here
var baseUrl = 'http://jht-teamdeal.ca.jhteam.arvixevps.com';
//put the key/value combination for login here
var auth = {
username: "ac2ed007acf842f2",
password: "7cc31e7b69f3410b"
};
var getFullUrl = function (relativeUrl) {
var retval = baseUrl + '/api/' + relativeUrl;
retval = retval.replace("//", "/");
return retval;
};
var authHeader = function (username, password) {
var retval = 'Basic ' + encodeBase64(username + ":" + password);
return retval;
};
$("#btnClear").click(function () {
$("#resultcode").html('');
$("#resultData").html('');
});
function success(data) {
$('#resultcode').html('OK');
$('#resultData').html(JSON.stringify(data));
}
function fail(xhr) {
$('#resultcode').html(xhr.responseText || xhr.statusText);
$('#resultData').html(JSON.stringify(xhr));
}
function executeAjax(callMethod, callType, callData)
{
var args = {
type: callType,
url: getFullUrl(callMethod),
beforeSend: function (xhr, setting) {
xhr.setRequestHeader("Authorization", authHeader());
},
success: function (data) {
success(data);
},
error: function (xhr) {
fail(xhr);
}
};
if (callData) args.data = callData;
$.ajax(args);
}
$("#btnGet").click(function (e) {
var method = 'store/get';
var restAuthHeader = 'Basic ODZjOThmY2M2MTlkNDBlMTo4NjE4Y2E2MWRlYTY0MzRi';
$.ajax({
type: 'GET',
url: baseUrl, //+ method,
beforeSend: function (xhr, setting) {
...