Code
<!DOCTYPE html>
<html>
<head>
<title>Web Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style type="text/css">
*{
font-size: 100%;
font-family: arial;
padding: 0px;
}
</style>
</head>
<body>
<center>
<h1>jQuery API Show Country Details</h1>
<select id="choose"></select>
<hr/>
<p id="blog"></p>
</center>
<script type="text/javascript">
$.ajax({
method: "get",
url: "https://restcountries.eu/rest/v2/all",
type: 'json',
}).done(function( msg ) {
var data = "";
for (var i = 0; i < msg.length; i++) {
data+="<option value="+msg[i].alpha2Code+">"+msg[i].name+"</option>";
}
$('#choose').html(data);
});
$('#choose').on('change',function(){
var code = $('#choose').val();
var url = 'https://restcountries.eu/rest/v2/alpha/'+code;
$.ajax({
method: "get",
url: url,
type: 'json',
})
.done(function( msg ) {
var blog ='';
blog+='<b>name : </b>'+msg.name+'<br/>';
blog+='<b>nativeName : </b>'+msg.nativeName+'<br/>';
blog+='<b>numericCode : </b>'+msg.numericCode+'<br/>';
blog+='<b>population : </b>'+msg.population+'<br/>';
blog+='<b>region : </b>'+msg.region+'<br/>';
$('#blog').html(blog);
});
})
</script>
</body>
</html>
Demo:
0 comments:
Post a Comment