Jquery Ajax Get Data:
Nov 4, 2020
Concept:
N.B.:Return JSON response.
$(document).ready(function(){
$.ajax({
url: 'ajaxfile.php',
type: 'get',
dataType: 'JSON',
success: function(response){
var len = response.length;
for(var i=0; i<len; i++){
var id = response[i].id;
var username = response[i].username;
var name = response[i].name;
var email = response[i].email;
var tr_str = "<tr>" +
"<td align='center'>" + (i+1) + "</td>" +
"<td align='center'>" + username + "</td>" +
"<td align='center'>" + name + "</td>" +
"<td align='center'>" + email + "</td>" +
"</tr>";
$("#userTable tbody").append(tr_str);
}
}
});
});Full code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<title>LaravelDemo</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Style -->
<style>
.input-box { position: relative; }
.unit { position: absolute; display: block; left: 5px; top: 10px; z-index: 9; }
.fixedTxtInput { display: block; border: 1px solid #d7d6d6; background: #fff; padding: 10px 10px 10px 30px; width: 100%; }
</style>
</head>
<body>
<div class="container">
<a href="javascript:;" id="getData" >Get Data</a>
<div id="title""></div>
</div>
<script type=text/javascript>
$(document).ready(function() {
$("#getData").click(function() {
$.ajax({
type: "GET",
url: "https://jsonplaceholder.typicode.com/posts",
success: function (data) {
//$("#title").html(data.title);
//$("#description").html(data.description);
for (var i = 0; i < data.length; i++) {
console.log(data[i].title);
var id = data[i].id;
var title = data[i].title;
var show = "<tr>"+
"<td>"+ id + "</td>" +
"<td>"+ title + "</td>" +
"</tr>";
$("#title").append(show);
}
}
});
});
});
</script>
</body>
</html>
