This question has already been answered:

function f1(){ var q = $('#four').val(); $.getJSON("http://ip-api.com/json/" + q + "?callback=?", function(data) { var table_body = ""; $.each(data, function(k, v) { table_body += "<tr><td>" + k + "</td><td><b>" + v + "</b> </td></tr>"; }); $("#GeoResults").html(table_body); }); } <input id="four" type="text" onchange="f1()"> <table id="GeoResults"></table>

Reported as a duplicate member of the Spirit of the Community ♦ Nov 28 '17 at 18:32 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    1 answer 1

     function f2(){ var q = $('#fice').val(); var resultElement = document.getElementById('getResult1'); resultElement.innerHTML=''; axios.get("http://ip-api.com/json/" + q + "?callback=?") .then(function (response) { console.log(response) resultElement.innerHTML = generateSuccessHTMLOutput(response); }) .catch(function (error) { resultElement.innerHTML = generateSuccessHTMLOutput(error); }); } function generateSuccessHTMLOutput(response){ return response.data } <input id="fice" type="text" onchange="f2()"> <div id="getResult1"></div>