AJAX HTML Javascript jQuery PHP Example MORE

PHP Webservice example for Cordova fetch data in a Table

❮ Previous Next ❯

Here we using 3 file for fetch data in a table using php web service.

  1. index.html
  2. database.php
  3. fetch.php

index.php

<!doctype html>
<html lang="en">
<body>	
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<div class="mdl-grid demo-content" id="student_view">
				<div style="text-align:right;padding-bottom:5px;"><a href="add_student.html"><button class="button_right mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">
					  Add New
					</button></a></div>
				<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width:100%">
					<thead>
						<tr>
							<th class="mdl-data-table__cell--non-numeric">Sl No</th>
							<th class="mdl-data-table__cell--non-numeric">Student Name</th>
							<th class="mdl-data-table__cell--non-numeric">Mobile</th>
						</tr>
					</thead>
					<tbody id="students_view">
						
					</tbody>
				</table>
			
		</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
			$(document).ready(function(){
			
			
			    $.ajax({
					url: "http://www.bbtpl.in/kam/ajaxStudentsData",
					type: "POST",
					data:{
						
					},
					cache: false,
					success: function(dataResult){
						var data = JSON.parse(dataResult);
						for(var i=0; i<data.length;i++){
						    var count= i + 1;
							var id=data[i]['id'];
							var name=data[i]['name'];
							var contact = data[i]['contact'];
							$("#students_view").append('<tr class="view" data-id="'+id+'"><td class="mdl-data-table__cell--non-numeric">'+count+'</td><td class="mdl-data-table__cell--non-numeric">'+name+'</td><td class="mdl-data-table__cell--non-numeric">'+contact+'</td></tr>');
						} 
					},
					error: function(data) {
						alert(JSON.stringify(data));
					}
					
				});
			});
</script>
</body>
</html>

database.php

<?php
	$servername = "localhost";
	$username = "root";
	$password = "";
	$db="school";
	$conn = mysqli_connect($servername, $username, $password,$db);
?>

fetch.php

<?php
    include 'database.php';
    $result = mysqli_query($conn,"SELECT * FROM students_data");
    $row = mysqli_fetch_array($result)
    echo json_encode($row);
?>
❮ Previous Next ❯