JSFiddle - React, Tailwind, and code Playground
HTML
<a href="#" onclick="return runAjax();"> Place Order 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":"DoPUQBErcpKPtRmbjpcFvbb8YCMeBjr4w6OcyjtA"},
"REQUESTPARAM":[
{
"MODULE":"putitem",
"METHOD":"webOrder",
"PARAMS":{
"CUSTOMERID": 446,
"ORDERTYPE": "Collection",
"USEALTERNATEADDRESS": 0,
"PAYMENTTYPE": "pay_on_collection",
"PAIDAMOUNT": 0,
"COMMENTS": "This is a comment for this order",
"PRODUCTS": [
{
"ID": 23,
"QUANTITY": 3,
"WITHINGREDIENTID": [14, 26],
"WITHOUTINGREDIENTID": [19, 16]
},
{
"ID": 31,
"QUANTITY": 2,
"WITHOUTINGREDIENTID": [22]
},
{
"ID": 23,
"QUANTITY": 3,
"WITHINGREDIENTID": [24],
},
{
"ID": 23,
"QUANTITY": 1
}
]
}
},
],
},
success:function(data) {
console.log(data);
...