JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" onclick="return runAjax();"> Contact US Check </a>
<div id="responseData">
Waiting for Action...
</div>
CSS
#responseData {
margin-top: 15px;
font-family: "Arial"
}
JavaScript
// handles the click event, sends the query
function runAjax() {
$("#responseData").html("Collecting your Data...");
$.ajax({
url: "http://tiffintom.com/api/private/request/data",
type: "POST",
dataType: "json",
data: {
"RESTAURANT":{"APIKEY":"JyxtfV8BnnvQgm5vJCtgOMfH3fJSf3JOs67xR5Y4"},
"REQUESTPARAM":[
{
"MODULE":"action",
"METHOD":"contactUs",
"PARAMS":{
"FULLNAME":"Tariqul Islam",
"EMAIL":"[email protected]",
"MESSAGE":"This is a Test Message from API"
}
},
],
},
success:function(data) {
console.log(data);
$("#responseData").html(JSON.stringify(data));
},
error: function () {
$('#responseData').html('There was an error!');
}
});
return false;
}