jQuery AJAX request demo

by satish2437

HTML

<a href="#" onclick="return getApiResponse();"> test success </a>
<div id="output">waiting for action</div>

CSS

a {
    padding: 0.2em;
}
a:hover {
    background-color: #02AAEE;
}
#output {
    display: block;
    margin-top: 8px;
    padding: 1%;
    border: 1px solid #666;
    background-color: #efefef;
    
}

JavaScript

// handles the click event, sends the query
function getApiResponse() {
    var jsonObject = {"name":"Satish Chandra"};
    $.ajax({
        url:'/echo/json/',
        type:'POST',
        data:JSON.stringify({"name":"Satish Chandra"}),
        complete: function (response) {
        		var jsonResponse = JSON.stringify(response);
            $('#output').html(jsonResponse);
        },
        error: function () {
            $('#output').html('Bummer: there was an error!');
        },
    });
    return false;
}