Get User Data in Ajax using jQuery, PHP & MySQL

Get User Data in Ajax using jQuery, PHP & MySQL

Get User Data in Ajax using jQuery, PHP & MySQL

I adore jQuery system, feels like we can do some wonderful things effortlessly. On the off chance that you know about the essential of jQuery structure as well, the following thing you need to do is figure out how to utilize jQuery Ajax to include and recover records from MySql database. How about we investigate how we execute continuous include and recover records utilizing Ajax.

Live Demo   Download Source Code

Index.php

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<title>Get User Data in Ajax using jQuery, PHP & MySQL</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#getUser').on('click',function(){
        var user_id = $('#user_id').val();
        $.ajax({
            type:'POST',
            url:'getData.php',
            dataType: "json",
            data:{user_id:user_id},
            success:function(data){
                if(data.status == 'ok'){
                    $('#userName').text(data.result.name);
                    $('#userEmail').text(data.result.email);
                    $('#userPhone').text(data.result.phone);
                    $('#userCreated').text(data.result.created);
                    $('.user-content').slideDown();
                }else{
                    $('.user-content').slideUp();
                    alert("User not found...");
                } 
            }
        });
    });
});


</script>
</head>
<body>
<h2>Get User Data in Ajax using jQuery, PHP & MySQL</h2>
<input type="text" id="user_id" />
<input type="button" id="getUser" value="Get Details"/>
<div class="user-content" style="display: none;">
    <h4>User Details</h4>
    <p>Name: <span id="userName"></span></p>
    <p>Email: <span id="userEmail"></span></p>
    <p>Phone: <span id="userPhone"></span></p>
    <p>Register Date: <span id="userCreated"></span></p>
</div>
</body>
</html>

getData.php

<?php
if(!empty($_POST['user_id'])){
    $data = array();
    
    //database details
    $dbHost = 'localhost';
    $dbUsername = 'root';
    $dbPassword = '';
    $dbName = 'lisenme';
    
    //create connection and select DB
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
    if($db->connect_error){
        die("Unable to connect database: " . $db->connect_error);
    }
    
    //get user data from the database
    $query = $db->query("SELECT * FROM users WHERE id = {$_POST['user_id']}");
    
    if($query->num_rows > 0){
        $userData = $query->fetch_assoc();
        $data['status'] = 'ok';
        $data['result'] = $userData;
    }else{
        $data['status'] = 'err';
        $data['result'] = '';
    }
    
    //returns data as JSON format
    echo json_encode($data);
}
?>

 

You May Also Like

About the Author: Ranjith Kumar A

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x