Edit in JSFiddle

function getSuccessOutput() {
  $.ajax({
    url: '/echo/js/?js=hello%20world!',
    success: function(response, status, xhr) {
      console.log(response);
      $('#output').html(response);
    },
    error: function() {
      $('#output').html('Bummer: there was an error!');
    },
  });
  return false;
}

function getFailureOutput() {
  $.ajax({
    url: '/abc.php',
    success: function(response) {
      console.log(data, response);
      // replace existing HTML div content with the AJAX response
      $('#output').html(response);
    },
    error: function(errorResponse, status) {
      console.log(errorResponse);
      $('#output').html('Error Response!');
    },
  });
  return false;
}

<h2>jQuery AJAX Demo - jCombat</h2>

<a href="#" onclick="return getSuccessOutput();"> Test Success </a> | <a href="#" onclick="return getFailureOutput(); return false;"> Test Failure</a>
<div id="output">The AJAX data gets displayed here. Click above links.</div>

a {
  padding: 0.2em;
}

a:hover {
  color: #02AAEE;
}

#output {
  display: block;
  margin-top: 8px;
  padding: 1%;
  border: 1px solid #666;
  background-color: #efefef;
}