How To Retrieve Data From Database Using JavaScript In HTML
Last Updated : Mar 11, 2024
IN - JavaScript HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of how to retrieve data from database using JavaScript in HTML, in database SQL Server we created table with some information we need to retrieve them and display on webpage.
For achieve this we must make connection between server and client side (in the sense html webpage side). When make connection need server side language like php.
Because it supports our connection execution so when our server request will success then we can retrieve any data and also any length of data from database.
In javascript has XMLHttpRequest object to communicate with servers. It can send and receive information in various formats including JSON, XML, HTML and text files.
Step By Step Guide On How To Retrieve Data From Database Using JavaScript In HTML :-
Here we used ‘XMLHttpRequest’ object for collects data from database. For generating connection with sql server we need to use php server side language.
In php we collects server information like, ‘server_name, user_name, password, database_name’ for execute connection with server and executing query to fetch all data from table ‘info’ encoded to html webpage.
Index.php
<!DOCTYPE html>
<html>
<head></head>
<body onload="table();">
<script type="text/javascript">
function table(){
const xhttp = new XMLHttpRequest();
xhttp.onload=function(){
document.getElementById("tbl").innerHTML=this.responseText;
}
xhttp.open("GET","system.php");
xhttp.send();
}
setInterval(function(){
table();
}, 1);
</script>
<div id="tbl">
</div>
</body>
</html>
System.php
<?php
$conn = mysqli_connect("localhost","root","","dbase");
$res=mysqli_query($conn,"SELECT * FROM info");
?>
<table border = 1 cellpadding = 10>
<tr>
<td>ID</td>
<td>name</td>
<td>country</td>
</tr>
<?php $i=1;?>
<?php foreach($res as $r) : ?>
<tr>
<td><?php echo $i++; ?></td>
<td><?php echo $r["name"]; ?></td>
<td><?php echo $r["country"]; ?></td>
</tr>
<?php endforeach; ?>
</table>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and some websites when need to use external files those links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here. We used ‘onload’ event in <body> tag for generate function when user open browser.
- In <script> we created XMLHttpRequest object name is ‘xhttp’ for request data from server. In script for opening file in server we using ‘xhttp.open()’ method with two parameters.
- Here we are fetching data from server so we used ‘GET’ method, url contain ‘system.php’ it has database connection code.
- The open() method specifies the type of request for server and send() method sends request to the server.
- setInterval() function is commonly used to set a delay for functions that are executed again and again, such as animation. We can cancel the interval using clearInternal().
- That retrieved data’s finally append to <div> with ID ‘tbl’ in html.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
- Before writing system.php file we need to create database ‘dbase’ on mysql server then create a table with two columns namely fname, lname then table name is ‘info’.
- In system.php Mysqli_connect() function used for create new connection and its stored into variable $conn, It has all server informations. mysqli_query() function performs a query against a database. This method executing select query for collects all data from table.
- After table created with header row, three columns and we embeded php code inside table creation. Then foreach() loop used for collected data’s printed within table columns.
Conclusion :-
I hope this tutorial on how to retrieve data from database using JavaScript in HTML helps you and the steps and method mentioned above are easy to follow and implement.
When user inserting data’s to database and in webpage all database data’s are updated on html table.
Using javascript, php and database we can collect and maintain more types of information like students personal information, students mark detail, office employee details, salary details and secure informations, etc..,
In conclusion now we able to connect database server using php, javascript only.
About Amruta
