Cara Menampilkan data di database tanpa Refresh dengan ajax dan jquery

Publish Date : 24-04-2018 , dibaca 56785 kali, Hari ini dibaca : 1 kali ,0 comments

Ok.. Pada tutorial kali ini kita akan membahas Cara Tampil Data Tanpa Refresh F5 .. Load data tanpa refresh sangat tidak mungkin dilakukan hanya dengan menggunakan php mysql , Untuk mengambil data dari database tanpa refresh halaman kita membutuhkan ajax jquery , Dengan ajax jquery hal ini akan mungkin dilakukan , Berikut cara menampilkan data dari database tanpa refresh halaman dengan menggunakan ajax jquery :

Pada Kasus ini kita akan menampilkan data di database berdasarkan input text nama yang ada dalam database , dengan kata lain jika kita menginputkan nama di database , maka data yang lainya akan terload / tampil sesuai dengan data yang ada di database , Tipe text ini dapat di ganti dengan menggunakan combobox :

Secara Garis Besar untuk menampilkan data dari database tanpa refresh halaman dengan ajax jquery ada 2 step :

1. Buat HTML Form untuk menampilkan data
2. Konek ke database dan menampilkan data

1. Membuat Form HTML untuk menampilkan data dari database : index.html

<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    function loaddata()
    {
    var name=document.getElementById( "username" );
    if(name)
    {
    $.ajax({
            type: 'post',
            url: 'tampildata.php',
            data: {
            user_name:name,
            },
            success: function (response) {
            // We get the element having id of display_info and put the response inside it
            $( '#display_info' ).html(response);
            }
           });
    }
    else
    {
    $( '#display_info' ).html("Please Enter Some Words");
    }
    }
</script>
    </head>
    <body>
     <input type="text" name="username" id="username" onkeyup="loaddata();">
     <div id="display_info" >
     </div>
     </body>
</html>

dan Yang ke 2

2. Membuat Koneksi ke database dan Menampilkan data tampildata.php

<?php
if( isset( $_POST['user_name'] ) )
{
$name = $_POST['user_name'];
$host = 'localhost';
$user = 'root';
$pass = ' ';
mysql_connect($host, $user, $pass);
mysql_select_db('student');
$selectdata = " SELECT age,course FROM student_info WHERE name LIKE '$name%' ";
$query = mysql_query($selectdata);
while($row = mysql_fetch_array($query))
{
    echo "<p>".$row['age']."</p>";
    echo "<p>".$row['course']."</p>";
}
}
?>