使用PHP和Ajax的自定义登录表单检查用户名并显示个人资料图片

Question

i'm trying to do something "different" with my login page, but i think i'm doing somthing wrong or not understanding the process.

Right now, my users table are like:

user_id, username, password, profile_picture, first_name, last_name

What i want is, when you click in the input text (on focus) you start typing your username, once you click out, the ajax will check this user and return at the top the profile picture for that account.

Here it's an example for this but using gravatars: Example Here

Can someone help me to understand how this request can be done with ajax and php?

Thanks!

Answer 1

JQUERY:

$(function(){
    $("#myInput").blur(function(){
        // On exit, Get Image data
        $.get("getUserImage.php", { user: $(this).val() }, function(data){
            if(data != "error"){
                $("#userImage").attr("src", data);
            }
        });
    });
});

PHP (getUserImage.php):

<?php
$user = isset($_GET['user'])?$_GET['user']:"";

if(empty($user)){
    die("error");
}

// connect to MySQL DB w/ MySQLi
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");

if ($stmt = $mysqli->prepare("SELECT userImage FROM table WHERE user=?")) {
    // bind parameters
    $stmt->bind_param("s", $user);
    // execute query 
    $stmt->execute();
    // bind result variables
    $stmt->bind_result($image);
    // fetch value
    $stmt->fetch();
    if(!empty($image)){
        printf("http://www.example.com/%s", $image);
    } else {
        echo "error";
    }
    // close statement
    $stmt->close();
}
// close connection
$mysqli->close();
?>