PHP + MYSQL + AJAX = Troca de imagens

Com certeza posso te ajudar com isso! Para realizar a busca da imagem no banco de dados MySQL e exibi-la de acordo com o nome selecionado no option, vamos combinar o poder do AJAX com o PHP.

Estrutura geral:

HTML:

Crie um select com options contendo os nomes.
Inclua um elemento para exibir a imagem.
Adicione um script JavaScript que utiliza AJAX para enviar o nome selecionado para o PHP.
PHP:

Receba o nome via POST.
Conecte-se ao banco de dados MySQL.
Busque a imagem do nome selecionado.
Retorne a imagem para o JavaScript.
JavaScript:

Receba a imagem retornada pelo PHP.
Exiba a imagem no elemento HTML.

Passo a passo detalhado:

HTML



PHP




JavaScript



Observações:

Adapte o código para sua estrutura de pastas e nomes de arquivos.
Certifique-se de que a coluna imagem no banco de dados armazena a imagem em formato JPEG.
Para outros formatos de imagem, ajuste o Content-Type no PHP.
Com esse código, você terá um sistema funcional para buscar e exibir a imagem do nome selecionado no banco de dados!

Dicas extras:

Utilize bibliotecas JavaScript como jQuery para facilitar a manipulação do DOM.
Implemente validações para garantir que o nome selecionado seja válido.
Adicione tratamento de erros para lidar com possíveis falhas na busca da imagem.


Espero que este guia completo te ajude a alcançar seu objetivo!

Obrigado pela ajuda, em HTML e PHP não tive qualquer dificuldade, porem não resulta para aquilo que pretendo, pois assim que seleciono uma opção a página faz refresh e todas as opções e campos preenchidos ficam em branco novamente, já em javascript não consegui executar o código pois não tenho bem a certeza do que escrever na pagina script.php ( penso que seja o código em PHP ou HTML correto?).

Mais uma vez obrigado

Boas, vou postar aqui o meu código para perceberem aonde está o meu erro:

HTML

<select id="nomes">
<option value="CD01">CD01</option>
<option value="CD21">CD21</option>
<option value="CD24">CD24</option>
</select>

<img id="imagem" src="" alt="Imagem">

<script src="script.js"></script>


PHP

<?php

// Recebendo o nome
$nome = $_POST['nome'];

// Conectando ao banco de dados
$con = mysqli_connect("localhost", "cadife", "U19mg7378243199","bd_technicdoor");

// Buscando a imagem
$sql = "SELECT foto_painel FROM tb_preco_97 WHERE modelo = '$nome'";
$resultado = mysqli_query($$con, $sql);
$imagem = mysqli_fetch_assoc($resultado)['foto_painel'];

// Fechando a conexão
mysqli_close($conexao);

// Retornando a imagem
header('Content-Type: image/jpeg');
echo $imagem;

?>


Javascript

const selectNomes = document.getElementById('nomes');
const imagem = document.getElementById('imagem');

selectNomes.addEventListener('change', () => {
const nome = selectNomes.value;

const xhr = new XMLHttpRequest();
xhr.open('POST', 'verificar2.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onload = () => {
if (xhr.status === 200) {
imagem.src = `data:image/jpeg;base64,${xhr.responseText}`;
} else {
console.error('Erro ao buscar imagem.');
}
};
xhr.send(`nome=$`);
});

Boas, a linha $nome = $_POST['nome']; no PHP não está a receber a variavel do option consegue perceber qual o erro?