JSFiddle - React, Tailwind, and code Playground

by Christopher McCulloh

HTML

<!--div id="log">JSON POST</div-->
<div id="log2">JSONP GET</div>

JavaScript

var request = $.ajax({
    url: "http://23.21.120.66/product/",
    type: "POST",
    data: {
        "id": "prod695364",
        "name": "Nike Air Max Barkley Men&#039;s Basketball Shoes",
        "url": "http://www.finishline.com/store/product/nike-air-max-barkley-men-s-basketball-shoes?categoryId=cat20007&productId=prod695364",
        "img_src": "http://www.finishline.com/store/images/products/lg488119090.jpg",
        "price": "$129.99",
        "sizes": ["8", "8.5", "9", "9.5", "10", "10.5", "11", "11.5", "12", "13", "14"]
    },
    crossDomain: true,
    dataType: "json"
});

request.done(function(msg) {
    console.log('success');
    console.log(msg);
    //$("#log").html(msg.id);

});

request.fail(function(jqXHR, textStatus) {
    console.log("error");
    console.log(jqXHR);
    //$("#log").html("JSON POST Request failed: " + textStatus);
});



function updateMap(){
    var getRequest = $.ajax({
        url: "http://23.21.120.66/product/",
        type: "GET",
        data: {
            "id": "prod695364"
        },
        crossDomain: true,
        dataType: "jsonp"
    });
    
    getRequest.done(function(msg) {
        console.log('success');
        console.log(msg);
        $("#log2").prepend('<h1>'+msg.name+'</h1><img src="' + msg.img_src + '">');
    
    });
    
    getRequest.fail(function(jqXHR, textStatus) {
        console.log("error");
        console.log(jqXHR);
        $("#log2").html("JSONP GET Request failed: " + textStatus);
    });
}

var intervalID = window.setInterval(updateMap, 3000);
$("#log2").html('');
updateMap();