display_data.html
<html ng-app="fetch"><head>
<title>AngularJS GET request with PHP</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.24/angular.min.js"></script>
</head>
<body>
<br>
<div class="row">
<div class="container">
<h1>Angular $http GET Ajax Call</h1>
<div ng-controller="dbCtrl">
<input type="text" ng-model="searchFilter" class="form-control">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="students in data | filter:searchFilter">
<td>{{students.sno}}</td>
<td>{{students.name}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
var fetch = angular.module('fetch', []);
fetch.controller('dbCtrl', ['$scope', '$http', function ($scope, $http) {
$http.get("select.php")
.success(function(data){
$scope.data = data;
})
.error(function() {
$scope.data = "error in fetching data";
});
}]);
</script>
</html>
fetch_data.php
<?phpheader("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
$conn = mysqli_connect("localhost", "root", "", "task_management");
$result = mysqli_query($conn,"SELECT sno,name,course from students");
$outp = array();
while($rs = mysqli_fetch_array($result)) {
$outp[] = $rs;
}
$outp = $outp;
$conn->close();
echo json_encode($outp);
?>
No comments:
Post a Comment