contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Cara Menampilkan data di database tanpa Refresh dengan ajax dan jquery

Posted in Javascript Jquery Life at 10 Agustus 2016 With 0 Comments

Ok.. Pada tutorial kali ini kita akan membahas cara menampilkan data dari database mysql  tanpa refresh halaman dengan ajax dan jquery .. 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 :

cara menampilkan data berdasarkan textbox

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>";
}
}
?>

Artikel Terkait

Diskusi