JSFiddle - React, Tailwind, and code Playground

by Jonathon Mascorella

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="alert alert-info" role="alert"><p>A simple request to demonstrate AJAX</p></div>
                <button class="btn btn-primary" data-ajax-data="Request echo!">Send Request
                </button>
        </div>
    </div>
    <div class="spacer"></div>
    <div class="row">
        <div class="col-xs-8 col-xs-offset-2">
            <div class="alert alert-success post-result"><p>&nbsp;</p></div>
            <div class="alert alert-warning get-result"><p>&nbsp;</p></div>
        </div>
    </div>
</div>

CSS

body {
    margin-top:70px;
}
.alert-result {
    display:none;
}
.spacer {
    margin-top:20px;
}

JavaScript

$(".btn").click(function() {
     request = $(this).attr("data-ajax-data");
    //alert(request);
    request_json = { information:request };
    //console.log(request_json);
   $.ajax({
        method: "POST",
        url: "/echo/json/",
        data: request_json
    })
   .done(function (result) {
   var arr = result;
   console.log(arr);
       $('.post-result').html('<p>POST result</p><p> '+result+'</p>'); 
   });
});