Tuesday, 15 August 2017

Use ajax Method With Jquery To Get JSON Data In Html - W3tricks

Use ajax Method With Jquery To Get JSON Data In Html


  • Use jquery simple to get JSON Data in the Third party API.
  •  ' $.ajax' method is used to getting JSON data using an AJAX, HTTP, HTTPS and GET request.


index.html


<html>
    <head>
        <title>W3tricks</title>
    </head>
<body bgcolor="#000">
<div id="output" style="color:#fff;"></div>
<br/><p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>


Script.js


$(document).ready(function(e) {
var con = "<h1>All Name List</h1>";

$.ajax({
url:"https://jsonplaceholder.typicode.com/posts/1/comments",
type:"GET",
dataType:"json",
success:function(data){
for(var x in data){
con +=  (parseInt(x) + 1)+ '&nbsp;' + data[x].name + "<br/>";
}
$('#output').html(con);
}
})

});


Output



0 comments:

Post a Comment