PHP 查询数据库答案

【问题标题】：PHP Query databasePHP 查询数据库
【发布时间】：2017-08-01 06:08:11
【问题描述】：

我有两个容器，第一个是包含玩家姓名的表单（选择），第二个是与这些玩家相关的图像。当用户更改选择值时，图像也会更改为该特定玩家图像。

我在 JQuery 中创建了这个，一切都很好，但是我决定研究数据库的玩家数量。

为了更好地理解这里是我在 JQuery 中的简短版本。

<select id="clubPlayers" name="clubPlayers"></select>

var PLAYER_NAMES = [
    "Player 1",
];

var players = '';
for (var i=0;i<PLAYER_NAMES.length;i++){
    players += '<option value="'+ PLAYER_NAMES[i] + '">' + PLAYER_NAMES[i] +     '</option>';
    PLAYER_NAMES.sort();
}
$('#clubPlayers').append(players);

// Players
$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

现在我想在 PHP 和 Mysql 中重新创建它。我创建了一个数据库，该数据库由 3 列组成，它们是“id”“player_name”和“player_image”。（player_image 将作为图片链接输入）

我已经能够查询数据库并将 player_name 的字段作为选择元素循环。

<?php

$conn = new mysqli('localhost', 'root', '', 'players') 
or die ('Cannot connect to db');

$result = $conn->query("SELECT id, player_name, player_image FROM player_info");


echo "<select id='clubPlayers' name='clubPlayers'>";

while ($row = $result->fetch_assoc()) {

              unset($id, $player_name, $player_image);
              $id = $row['id'];
              $player_name = $row['player_name']; 
              $player_image = $row['player_image']; 
              echo '<option value="'.$player_name.'">'.$player_name.'</option>';

}

echo "</select>";

?>

这很好，但我仍然需要从数据库中获取球员图像链接并使用该链接创建一个 img 标签。

我的问题是，这可以吗（JQUERY）

$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

重新创建并添加到上面我现有的 PHP 中。

【问题讨论】：

您的选择是只是用于更改图像还是将要提交到某处的一部分或表单？
只是为了换图

标签： javascript php mysql database wordpress

【解决方案1】：

你需要在元素上存储图片的数据。

$player_image = $row['player_image']; 
echo '<option value="'.$player_name.'" data-image="'. $player_image .'">'.$player_name.'</option>';

在您的 jQuery 中，您可以从选定的选项访问它...

$('#clubPlayers').on('change', function() {
  var image = $(this).data('image');
  $('.player-img>img').remove();
  $(".player-img").append("<img src='players/"+ image +"'>");
});

所选选项应该在上下文中的$(this) 中可用。如果没有，您需要在数据行中添加.find(selectedValue)。

【讨论】：