jQuery AJAX request demo

by karthick Chandran

HTML

<h1>
  Input
</h1>

<textarea id='emailTxt'></textarea>

<br />
<a href="#" onclick="return getSuccessOutput();"> test API </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 getSuccessOutput() {
var textData = $('#emailTxt').val();

console.log(textData);
  $.ajax({
    url: 'http://localhost:50563/api/CalculateTotalandGST',
    data:textData,
    complete: function(response) {
      console.log(response);
      $('#output').html(response.responseText);
    },
    error: function() {
      $('#output').html('Bummer: there was an error!');
    },
  });
  return false;
}