JSFiddle - React, Tailwind, and code Playground

HTML

<a href="action: fail">Trigger fail.</a><br />
<a href="action: ok">Trigger success.</a><br /><br />
<div id="result">Click above.</div>

CSS

body {
    font: 9pt Consolas;    
}
div {
    white-space: pre-line;
}

JavaScript

jQuery(function() {
    
    var result = document.getElementById("result"),
        url = '/echo/json/';
   
    jQuery('a').on('click', function() {
        
        result.textContent = 'Loading...';
        
        jQuery.ajax(url).success(function() {
            
            result.textContent = 'Ok! It works correctly.';
            
        }).error(function(xhr, type, data) {
            
            result.textContent = 'Ops! We have a problem.\n'
                + '\nURL: ' + url
                + '\nType: ' + type
                + '\nMessage: "' + data + '"' + (data === "" ? " (empty!?)" : "")
                + '\n\nCheck console.log for more.';
            
            console.log(xhr);
            
        });

        if(this.getAttribute('href') === 'action: ok') {
             return false;
        }           
        
    });
    
});