Восстановление информации пользователя с помощью имени пользователя для восстановления ввода в AJAX / PHP

Question

Я хочу получить аватар пользователя, используя его имя, в поле ввода. Однако то, что я сделал, не работает, и я не знаком с Ajax. Может ли кто-нибудь помочь мне и объяснить мне процедуру?

<input type="text" name="username" class="input" placeholder="Your username">
<img id="#result" src=""></img>

Вот мой ajax

$(document).keyup(function (event) {
    $.ajax({
        url: "App/Actions/PlayerGetFigure.php",
        type: "post",
        data: {
            login: function () {
                return $(':input[name="username"]').val();
            },
        },
        success: function (data) {
            $('#result').html(data);
        }
    });
});

А вот мой PHP

require '../../vendor/autoload.php';

use App\Models\UsersManager as Users;

$Users = new Users();

$username = $_POST['username'];

if (isset($username)) {
    $user = $Users->getByUsername($username);
    if ($user) {
        echo $user['avatar'];
    } else {
        return false;
    }
}

Answer 1

Я бы лично воспользовался этим подходом, для меня он выглядит немного чище (при условии, что $user['avatar'] возвращает путь к изображению)

HTML

<input type="text" id="username" class="input" placeholder="Your username" />
<div id="result"></div>

AJAX

$(document).keyup(function (event) {
    let username = $('#username').val();
    $.ajax({
        url: "App/Actions/PlayerGetFigure.php",
        type: "post",
        data: { login:username },
        success: function (data) {
            $('#result').html(data);
        }
    });
});

PHP

require '../../vendor/autoload.php';

use App\Models\UsersManager as Users;

$Users = new Users();

$username = $_POST['username'];

if (isset($username)) {
    $user = $Users->getByUsername($username);
    if ($user) {
        $avatar = $user['avatar'];
        echo "<img src='$avatar'></img>";
    } else {
        return false;
    }
}

Answer 2

Если это ваш HTML:

<input type="text" name="username" class="input" placeholder="Your username">
<img id="result" src=""></img>

Я бы посоветовал следующее jQuery.

$(function(){
  function getAvatar(username){
    var url = "";
    $.post("App/Actions/PlayerGetFigure.php", { login: username }, function(data){
      url = data;
    });
    return url;
  }
  $("input[type='username']").change(function(){
    $("#result").attr("src", getAvatar($(this).val()));
  });
});

Это предполагает, что скрипт PHP вернет ( Относительный или Абсолютный) URL Путь к изображению.