jQuery AJAX request demo

by kazu69

HTML

< a href = "#"
id = "click" > test < /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

$(function() {
  $('#click').on('click', function() {
    const prommise = getSuccessOutput();
    prommise.then(function(response) {
      $('#output').append('then: ' + response);
    })
  })
});

function getSuccessOutput() {
  return $.ajax({
    url: '/echo/js/?js=hello%20world!'
  }).done(function(response) {
    $('#output').append('done: ' + response)
  });
}
// handles the click event, sends the query
function getFailOutput() {
  $.ajax({
    url: 'myAjax.php',
    success: function(response) {
      console.log(data, response);
      $('#output').html(response);
    },
    error: function() {
      $('#output').html('Bummer: there was an error!');
    },
  });
  return false;
}