AngularJS – How to get data like jQuery AJAX from database using PHP

Hello Readers,

Today I would like to explain about retrieving data from database using PHP, like we do it in jQuery AJAX. For this first we have to create a PHP file that generates data in JSON format. We can use the following code to generate a JSON array and echo it. We already have a database named ‘students’ and we get data from ‘contact_detail’ table.

	$con = mysqli_connect("localhost","root","","students");
	$res= mysqli_query($con,"SELECT * FROM contact_detail");
	$result = array();
		$result[] = $row;
	echo json_encode($result);

The output of the above code is


The result will be displayed in the JSON format.

Now we add our AngularJS script to get data from database using PHP.

	<div ng-app="" ng-controller="studentController">
			<table class="tbl" ng-show="tblshow">
				<tr ng-repeat="x in dbValue">
					<td><span ng-bind=""></span> </td>
					<td><span ng-bind=""></span> </td>
					<td><span ng-bind="x.address"></span> </td>
					<td><span ng-bind="x.pincode"></span> </td>
		<input type="button" ng-click="changeValues()" value="Get from DB" ng-show="!tblshow" /></p>
	<script src="js/angular.js"></script>
		function studentController($scope,$http) {
			$scope.tblshow = false;
			$scope.changeValues = function (){
				$scope.tblshow = true;
				function(response) {
					$scope.dbValue = response;
			border:1px solid #ccc;
		.tbl th,td{
			border:1px solid #ccc;

We are using ng-show to hide and show the table and button. On loading e make the table to hide and once the button is clicked, table is displayed and button gets hidden.

The important line is $http.get(“getData.php”) which gets the JSON data from the getData.php file. When the button is clicked it calls the function changeValues() and updates the table with the JSON data.

You can also see the live demo.


Thanks for reading.

Feedback are welcome. Please feel free to ask questions.

Don’t forget to subscribe to Geeks.Gallery, to get free emails to your inbox.

Subscribe to Geeks.Gallery

Follow me


Web Developer at Energy Alternatives India
I'm interested in developing Web applications andkeen on learning new technologies.

View Nagarajan's Profile
Follow me

Latest posts by Nagarajan (see all)

  1. Dheeraj SIngh

Leave a Reply

Your email address will not be published. Required fields are marked *