PHP + MYSQL + AJAX = Troca de imagens

PHP

18/03/2024

Boas tardes,

Ainda sou novo em ajax, e a minha atual dificuldade é ,a seguinte, pretendo através do php fazer uma chamada ao banco de dados mysql de um nome ( tou usar o option) , e preciso que retorne a imagem desse nome, ou seja se eu selecionar a maria aparece a foto da maria, se eu selecionar o manel aparece a foto manel.

Obrigado
Carlos Ferraz

Carlos Ferraz

Curtidas 0

Melhor post

ɐɾǝɹƃi

ɐɾǝɹƃi

19/03/2024

Boas tardes,

Ainda sou novo em ajax, e a minha atual dificuldade é ,a seguinte, pretendo através do php fazer uma chamada ao banco de dados mysql de um nome ( tou usar o option) , e preciso que retorne a imagem desse nome, ou seja se eu selecionar a maria aparece a foto da maria, se eu selecionar o manel aparece a foto manel.

Obrigado



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

<select id="nomes">
    <option value="maria">Maria</option>
    <option value="manel">Manel</option>
    <option value="joao">João</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
$conexao = mysqli_connect("localhost", "usuario", "senha", "banco");

// Buscando a imagem
$sql = "SELECT imagem FROM usuarios WHERE nome = '$nome'";
$resultado = mysqli_query($conexao, $sql);
$imagem = mysqli_fetch_assoc($resultado)['imagem'];

// 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', 'script.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=$`);
});


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!
GOSTEI 1

Mais Respostas

Carlos Ferraz

Carlos Ferraz

18/03/2024

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
GOSTEI 0
Carlos Ferraz

Carlos Ferraz

18/03/2024

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=$`);
});
GOSTEI 0
Carlos Ferraz

Carlos Ferraz

18/03/2024

Boas tardes,

Ainda sou novo em ajax, e a minha atual dificuldade é ,a seguinte, pretendo através do php fazer uma chamada ao banco de dados mysql de um nome ( tou usar o option) , e preciso que retorne a imagem desse nome, ou seja se eu selecionar a maria aparece a foto da maria, se eu selecionar o manel aparece a foto manel.

Obrigado



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

<select id="nomes">
    <option value="maria">Maria</option>
    <option value="manel">Manel</option>
    <option value="joao">João</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
$conexao = mysqli_connect("localhost", "usuario", "senha", "banco");

// Buscando a imagem
$sql = "SELECT imagem FROM usuarios WHERE nome = '$nome'";
$resultado = mysqli_query($conexao, $sql);
$imagem = mysqli_fetch_assoc($resultado)['imagem'];

// 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', 'script.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=$`);
});


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!
GOSTEI 0
Carlos Ferraz

Carlos Ferraz

18/03/2024

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


Boas tardes,

Ainda sou novo em ajax, e a minha atual dificuldade é ,a seguinte, pretendo através do php fazer uma chamada ao banco de dados mysql de um nome ( tou usar o option) , e preciso que retorne a imagem desse nome, ou seja se eu selecionar a maria aparece a foto da maria, se eu selecionar o manel aparece a foto manel.

Obrigado



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

<select id="nomes">
    <option value="maria">Maria</option>
    <option value="manel">Manel</option>
    <option value="joao">João</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
$conexao = mysqli_connect("localhost", "usuario", "senha", "banco");

// Buscando a imagem
$sql = "SELECT imagem FROM usuarios WHERE nome = '$nome'";
$resultado = mysqli_query($conexao, $sql);
$imagem = mysqli_fetch_assoc($resultado)['imagem'];

// 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', 'script.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=$`);
});


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!
GOSTEI 0
POSTAR