Jump to content
SrTunes

JQuery preencher input automaticamente baseado em outro input com BD

Recommended Posts

Boa tarde amigos, sei que há vario tópicos parecidos com esse, com praticamente a mesma dúvida, mas com diferentes resoluções. Mas o motivo de eu ter aberto um tópico novo foi por causa tenho duvida no meu código que não encontrei resposta nos outros tópicos.

 

De antemão informo que meu conhecimento em javascript é muito limitado, por isso peço encarecidamente a paciência e compreensão dos colegas e dede já agradeço a todos. Muito obrigado.

 

Bem, o problema:

 

Tenho um form php com dois campos apenas: "PN do item" e "Descrição".

Para o primeiro campo de input (PN do Item), com a ajuda da internet, implementei um script que a medida que digito ele faz uma busca no BD e autocompleta. Até ai beleza.

O que estou querendo agora é, aproveitando a minha estrutura, fazer com que ao escolher o item do primeiro campo de input, o segundo campo de input me retornasse do BD a descrição deste item automaticamente sem refresh da página.

Isso é possível?

 

Abaixo deixo meus scripts:

<?php
	require_once 'config/conexao.class.php';
    require_once 'config/crud.class.php';

    $con = new conexao(); // instancia classe de conxao
    $con->connect(); // abre conexao com o banco

	$consulta = mysql_query("SELECT pn_item FROM descricao_de_itens"); //Busca da tabela descricao_de_itens o campo pn_item para preencher as opções no form
	$dados ="";
	if(mysql_num_rows($consulta) > 0){
		while($row = mysql_fetch_assoc($consulta)){
			$dados = $dados."\"".$row["pn_item"]."\",";
		}
	}
	$dados = substr($dados,0,-1); // retira a última virgula
?>
<!DOCTYPE html>
<html>
    <head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" href="http://localhost/controle_estoque/css/jquery-ui.css">
		<script src="http://localhost/controle_estoque/js/jquery-3.4.1.js"></script>
		<script src="http://localhost/controle_estoque/js/ui/jquery-ui.js"></script>
		<script>
			$( function(){
				var availableTags = [<?php echo $dados?>];
				$( "#tags" ).autocomplete({
					source: availableTags
				});
			} );
		</script>
        <title></title>
    </head>
    <body>
        <form action="" method="post"><!--   formulario carrega a si mesmo com o action vazio  -->
            
			<div class="ui-widget">
            <label for="tags">PN do Item:</label>
            <input id="tags" type="text" name="nome"/>
            <br />
            <br />
			</div>
            <label>Descri&ccedil;&atilde;o:</label>
            <input type="text" name="descricao"/>
            <br />
            <br />
            <input type="submit" name="cadastrar" value="Cadastrar" />      
        </form>
    </body>
</html>
<?php $con->disconnect(); // fecha conexao com o banco ?>

 

Share this post


Link to post
Share on other sites

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Share this post


Link to post
Share on other sites
27 minutos atrás, Michael Granados disse:

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Muito obrigado pela ajuda. A dica o evento change achei bem interessante, só que preciso compreende-la melhor para saber como aplicar.

Então, algumas dúvidas:

Ainda não compreendi a api jQuery.getJSON, mas quando me disse que terei uma "pagina", ai fiquei mais confuso. Vou precisar criar uma pagina em branco para receber o resultado?

Pensei em algo como outra função com onchange, assim que o valor do input é selecionado, o segundo input através de da segunda função percebe a mudança do primeiro e pega o valor que esta lá, aí penso que poderia chamar uma função php para realizar a pesquisa no BD e retornar o valor para o input atravé de jQuery mesmo.

 

Se puder me dar mais algum norte, agradeço.

Share this post


Link to post
Share on other sites
2 horas atrás, Michael Granados disse:

Vi que está utilizando a jQuery-UI. Parabéns por isso :-)

 

Você pode utilizar o evento change do autocomplete:

https://api.jqueryui.com/autocomplete/#event-change

 

Com o AJAX da jQuery:

http://api.jquery.com/jQuery.getJSON/

 

Para isso você vai ter uma "página" que vai imprimir apenas o resultado esperado... imagino algo como resgatavalor.php?pn_nome=XPTO e pegar o $_GET pra fazer a devida consulta no banco de dados.

 

Estou meio sem tempo agora pra explicar... tenta aí e posta a versão final pra gente :-D

 

Qualquer coisa, grita.

Bem, eu não consegui ainda entender como eu pego o valor do input 1 e trabalho em uma pesquisa DB para que me retorne o valor da pesquisa no outro input sem refresh.

Até agora o maximo que consegui foi replicar o valor do input 1 para o input 2 automaticamente com o change, mas não é isso que quero

 

Share this post


Link to post
Share on other sites

Olá @SrTunes,

 

Vamos do zero. Primeiro, vamos entender uma estrutura json. Ela é uma estrutura de natação de objetos que são facilmente parseados/entendidos/interpretados pelo JavaScript. Basicamente é uma notação que deve ser colocada entre chaves. E não é o chaves da SBT não... são os caracteres { e }. Dentro deles você vai ter uma sequência de atributos e valores separados por dois-pontos... Veja o exemplo:

{
  "nome": "Michael",
  "frase": "Amigo novo, vinho novo. É quando envelhece que o beberás com gosto.",
  "idade": 37
}

Perceba que entre cada item existe uma vírgula para separar... As aspas nos atributos fazem parte da notação json. Apesar de o javascript poder interpretar sem a necessidade delas, algumas outras linguagens podem ter problemas com isso, então vamos manter, ok :-)

 

Bom, no exemplo inicial, apontei um inteiro para minha idade. Você pode mesclar outras estruturas como arrays e até outros objetos nessa estrutura, fazendo com que você tenha flexibilidade para montar os dados como achar mais conveniente. Veja o exemplo:

{
  "recurso": "busca",
  "qantidadeTotal": 25,
  "paginas": 5,
  "paginaAtual": 1,
  "proxima": true,
  "anterior": false,
  "busca": [
    {
      "recurso": "tweet",
      "mensagem": "Olá mundo",
      "usuario": "@dgmike"
    },
    {
      "recurso": "tweet",
      "mensagem": "Olá @dgmike",
      "usuario": "@elcio",
      "em resposta a": "@dgmike",
      "links": [
        "https://twitter.com/dgmike",
        "https://twitter.com/elcio"
      ]
    }
  ]
}

E por aí vai... O legal é que para acessar esses dados você utiliza pontos e colchetes... exemplo:

 

items[1].links[0] === "http://twitter.com/dgmike"

 

Mas por que estou falando tudo isso? Porque você vai usar a estrutura para fazer a chamada AJAX, tanto para enviar quanto para receber os dados. Imagine que a chamada AJAX é como você acessar uma página do servidor sem precisar sair da página. Ela vai "por baixo dos panos" utilizando um objeto XMLHttpRequest ou algo similar.

 

Acontece que existem umas três ou quatro formas de fazer essa requisição e tratar o resultado dependendo do navegador e é aí que a jQuery entra, fazendo a abstração e deixando as requisições mais simples.

 

Para fim de exemplo, vou considerar o exemplo acima como um arquivo que consigo acessar no meu servidor como dados.json, vamos ver como isso funciona...

jQuery.ajax({
  type: 'GET',
  url: '/dados.json',
  error: function () {
    alert('ocorreu um problema com a requisicao');
  },
  success: function (dados) {
    alert('sucesso ao resgatar os dados do servidor: ' + dados.recurso);
  }
});

jQuery ainda tem uma forma mais acessível para as requisições mais comuns:

jQuery.get('/dados.json', function (dados) {
  alert('consulta realizada com sucesso:' + dados.recurso );
});

Bom, a pesquisa não precisa de fato ser um arquivo com extensão .json, ela pode ser um script PHP que retorne a estrutura JSON. Vamos a um exemplo:

<?php

$dados = array(
  "recurso" => "tweet",
  "tweet" => array(
    "mensagem" => "Em um ninho de mafagafos",
  ),
);

header("Content-Type: application/json"); // aqui informamos ao servidor que isso é um JSON ;-)
echo json_encode($dados);

Óbvio que seus dados não precisam ser fixos, eles podem vir de um banco de dados realizando uma query talvez filtrando por um dado vindo do $_GET. Veja...

 

<?php

require './conexao.php';

if (!isset($_GET['pesquisa']) || !trim($_GET['pesquisa'])) {
  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa é obrigarória'));
  exit;
}

// só vou abrir a conexao pra usar o banco de fato, o mysql_real_escape_string se baseia no banco que está conectado
$con = new conexao(); // instancia classe de conxao
$con->connect(); // abre conexao com o banco

$prepara = 'SELECT `campo` FROM `tabela` WHERE `campo_pesquisa` = \'%s\' LIMIT 1';
$sql = sprintf($prepara, mysql_real_escape_string($valor)); // evitando SQL Injections ;-)
$resultado = mysql_query($sql);

if (mysql_num_rows($resultado) == 0) {
  $con->disconnect();

  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa não retornou nada'));
  exit;
}

$dados = mysql_fetch_assoc($resultado);
$con->disconnect();

// e, por fim...
header('Content-Type: application/json');
echo json_encode(array('erro' => false, 'dados' => $dados));

Agora, basta acessar a URL /busca.php?pesquisa=javali que teremos um arquivo JSON com os dados do banco de dados.

 

Neste ponto cabe um disclaimer: pare de utilizar as funções mysql_* por questões de segurança, experimente o mysqli_* que tem suporte a versão orientada a objetos ou, se preferir, pule diretamente para PDO.

 

Agora, acoplando o seus inputs...

 

<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });
</script>

Aliás, agora pensando aqui... não sei qual o volume de informação que você resgata lá do servidor na primeira requisição, se vale a pena trazer toda a informação e fazer a busca local, sem precisar de requisição extra alguma....

<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = [
      {
        value: "jQuery",
        desc: "the write less, do more, JavaScript library"
      },
      {
        value: "jQuery UI",
        desc: "the official user interface library for jQuery"
      },
      {
        value: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"
      }
    ];
    
    var selecionado = function (event, ui) {
      if (!ui.item) {
        $('#descricao, #tags').val('');
        return;
      }
      $('#descricao').val(ui.item.desc);
    };

    $("#tags").autocomplete({
      source: availableTags,
      select: selecionado,
      change: selecionado
    });
  });
</script>

Desculpa a colcha de retalhos, mas fui escrevendo conforme as ideias iam surgindo... :-D

 

Qualquer coisa, grita.

 

 

---

Referencias:

http://json.org/

http://api.jquery.com/category/ajax/

http://api.jquery.com/jQuery.getJSON/

https://php.net/json_encode

https://www.php.net/mysqli

https://www.php.net/pdo

Share this post


Link to post
Share on other sites
7 horas atrás, Michael Granados disse:

Olá @SrTunes,

 

Vamos do zero. Primeiro, vamos entender uma estrutura json. Ela é uma estrutura de natação de objetos que são facilmente parseados/entendidos/interpretados pelo JavaScript. Basicamente é uma notação que deve ser colocada entre chaves. E não é o chaves da SBT não... são os caracteres { e }. Dentro deles você vai ter uma sequência de atributos e valores separados por dois-pontos... Veja o exemplo:


{
  "nome": "Michael",
  "frase": "Amigo novo, vinho novo. É quando envelhece que o beberás com gosto.",
  "idade": 37
}

Perceba que entre cada item existe uma vírgula para separar... As aspas nos atributos fazem parte da notação json. Apesar de o javascript poder interpretar sem a necessidade delas, algumas outras linguagens podem ter problemas com isso, então vamos manter, ok :-)

 

Bom, no exemplo inicial, apontei um inteiro para minha idade. Você pode mesclar outras estruturas como arrays e até outros objetos nessa estrutura, fazendo com que você tenha flexibilidade para montar os dados como achar mais conveniente. Veja o exemplo:


{
  "recurso": "busca",
  "qantidadeTotal": 25,
  "paginas": 5,
  "paginaAtual": 1,
  "proxima": true,
  "anterior": false,
  "busca": [
    {
      "recurso": "tweet",
      "mensagem": "Olá mundo",
      "usuario": "@dgmike"
    },
    {
      "recurso": "tweet",
      "mensagem": "Olá @dgmike",
      "usuario": "@elcio",
      "em resposta a": "@dgmike",
      "links": [
        "https://twitter.com/dgmike",
        "https://twitter.com/elcio"
      ]
    }
  ]
}

E por aí vai... O legal é que para acessar esses dados você utiliza pontos e colchetes... exemplo:

 

items[1].links[0] === "http://twitter.com/dgmike"

 

Mas por que estou falando tudo isso? Porque você vai usar a estrutura para fazer a chamada AJAX, tanto para enviar quanto para receber os dados. Imagine que a chamada AJAX é como você acessar uma página do servidor sem precisar sair da página. Ela vai "por baixo dos panos" utilizando um objeto XMLHttpRequest ou algo similar.

 

Acontece que existem umas três ou quatro formas de fazer essa requisição e tratar o resultado dependendo do navegador e é aí que a jQuery entra, fazendo a abstração e deixando as requisições mais simples.

 

Para fim de exemplo, vou considerar o exemplo acima como um arquivo que consigo acessar no meu servidor como dados.json, vamos ver como isso funciona...


jQuery.ajax({
  type: 'GET',
  url: '/dados.json',
  error: function () {
    alert('ocorreu um problema com a requisicao');
  },
  success: function (dados) {
    alert('sucesso ao resgatar os dados do servidor: ' + dados.recurso);
  }
});

jQuery ainda tem uma forma mais acessível para as requisições mais comuns:


jQuery.get('/dados.json', function (dados) {
  alert('consulta realizada com sucesso:' + dados.recurso );
});

Bom, a pesquisa não precisa de fato ser um arquivo com extensão .json, ela pode ser um script PHP que retorne a estrutura JSON. Vamos a um exemplo:


<?php

$dados = array(
  "recurso" => "tweet",
  "tweet" => array(
    "mensagem" => "Em um ninho de mafagafos",
  ),
);

header("Content-Type: application/json"); // aqui informamos ao servidor que isso é um JSON ;-)
echo json_encode($dados);

Óbvio que seus dados não precisam ser fixos, eles podem vir de um banco de dados realizando uma query talvez filtrando por um dado vindo do $_GET. Veja...

 


<?php

require './conexao.php';

if (!isset($_GET['pesquisa']) || !trim($_GET['pesquisa'])) {
  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa é obrigarória'));
  exit;
}

// só vou abrir a conexao pra usar o banco de fato, o mysql_real_escape_string se baseia no banco que está conectado
$con = new conexao(); // instancia classe de conxao
$con->connect(); // abre conexao com o banco

$prepara = 'SELECT `campo` FROM `tabela` WHERE `campo_pesquisa` = \'%s\' LIMIT 1';
$sql = sprintf($prepara, mysql_real_escape_string($valor)); // evitando SQL Injections ;-)
$resultado = mysql_query($sql);

if (mysql_num_rows($resultado) == 0) {
  $con->disconnect();

  header('Content-Type: application/json');
  echo json_encode(array('erro' => 'a pesquisa não retornou nada'));
  exit;
}

$dados = mysql_fetch_assoc($resultado);
$con->disconnect();

// e, por fim...
header('Content-Type: application/json');
echo json_encode(array('erro' => false, 'dados' => $dados));

Agora, basta acessar a URL /busca.php?pesquisa=javali que teremos um arquivo JSON com os dados do banco de dados.

 

Neste ponto cabe um disclaimer: pare de utilizar as funções mysql_* por questões de segurança, experimente o mysqli_* que tem suporte a versão orientada a objetos ou, se preferir, pule diretamente para PDO.

 

Agora, acoplando o seus inputs...

 


<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });
</script>

Aliás, agora pensando aqui... não sei qual o volume de informação que você resgata lá do servidor na primeira requisição, se vale a pena trazer toda a informação e fazer a busca local, sem precisar de requisição extra alguma....


<form action="" method="post">
  <div class="ui-widget">
    <label for="tags">PN do Item:</label>
    <input id="tags" type="text" name="nome" />
  </div>
  <div class="ui-widget">
    <label>Descrição:</label>
    <input id="descricao" type="text" name="descricao" />
  </div>
  <input type="submit" name="cadastrar" value="Cadastrar" />      
</form>

<script>
  $(function(){
    var availableTags = [
      {
        value: "jQuery",
        desc: "the write less, do more, JavaScript library"
      },
      {
        value: "jQuery UI",
        desc: "the official user interface library for jQuery"
      },
      {
        value: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine"
      }
    ];
    
    var selecionado = function (event, ui) {
      if (!ui.item) {
        $('#descricao, #tags').val('');
        return;
      }
      $('#descricao').val(ui.item.desc);
    };

    $("#tags").autocomplete({
      source: availableTags,
      select: selecionado,
      change: selecionado
    });
  });
</script>

Desculpa a colcha de retalhos, mas fui escrevendo conforme as ideias iam surgindo... :-D

 

Qualquer coisa, grita.

 

 

---

Referencias:

http://json.org/

http://api.jquery.com/category/ajax/

http://api.jquery.com/jQuery.getJSON/

https://php.net/json_encode

https://www.php.net/mysqli

https://www.php.net/pdo

Bom dia Michael! Cara, que aula você deu agora. Ajudou demais aqui. Já quero te agradecer muito, pois esclareceu muita coisa pra mim com relação a JQuery.

Fiquei com duvida em alguns pontos da sua explicação, pois vi que o que você postou modifica um pouco o que tinha feito. Olha só, neste código que você fez:

$(function(){
    var availableTags = <?php echo json_encode($dados); ?>;

    $("#tags").autocomplete({
      source: availableTags,
      change: function () {
        // aqui vem a mágica
        var valor = this.value;
        if (!$.trim(valor)) {
          return;
        }
        $.getJSON('/busca.php', { busca: valor }, function (dados) {
          $('#descricao').val(dados.resultado); // ou seja lá o que for...
        });
      }
    });
  });

No código acima eu estou enviando via get a variável "valor", estou certo? Mas o que tem nesta variável?

Bem, antes de ler seus post estava fazendo algo assim:

$( function(){
	var availableTags = [<?php echo $dados?>];
	$( "#tags" ).autocomplete({
		source: availableTags,
		change: autoCompleteChanged
	});
} );
function autoCompleteChanged( event, ui){
	var valorItem = $( "#tags").val();
	$( "form" ).submit(function( event ){
		event.preventDefault();
			$.ajax({
				url : 'config/funcoes.php',
				data : {pnitem : valorItem},
				type : 'get',
				dataType : 'json',
				success : function(data){
					$( "#desc").val(data.valor);
				},
			});
	});
}

No código que fiz o que tinha entendido era que "data" era onde eu inseria o dado que enviaria para a function e dela enviaria via get para o código php. (Meu código não funcionou). Fiz duas funções, mas tudo em uma função, como você fez achei bem melhor.

Não encontrei, no código que me apresentou, a ligação entre o dado do primeiro campo com o dado do segundo. Por exemplo, veja se o que entendi esta correto: a variável "availableTags" recebe uma lista do banco de dados, quando começo a digitar no campo 1 ele me dá as opções. Quando escolho uma delas, esse valor escolhido é recebido pela variável valorItem, que no ajax estaria no "data" com o nome de "pnitem". Este data vai para a function, que trataria no codigo php a consulta e me retornaria um valor.

Sabe onde errei?

Será que consegui explicar? :D

 

Muito obrigado mais uma vez.

 

Share this post


Link to post
Share on other sites

@SrTunes

 

Como diria Jack, vamos por partes...

 

Primeira dúvida... Sobre o trecho do $.getJSON('/busca.php', { busca: valor }, fn);

 

Por ser GET, a jQuery vai entender que se trata de um valor para apendar/adicionar/concatenar a sua URL, só que de forma mais segura, então você não precisa se preocupar em escapar caracteres como + ou &. Desta forma, digamos que valor tenha o conteúdo de pipoca. Então a jQuery vai montar a URL como /busca.php?busca=pipoca.

 

Agora, o valor vem de uma instrução um pouquinho mais pra cima... 

var valor = this.value;

No caso, this é o input onde você está colocando o texto e value é o valor desse mesmo input. A jQuery utiliza muito essa notação.

 

Sobre a segunda dúvida, acho que vale a pena analisar o que está sendo enviado para o servidor utilizando a ferramenta de desenvolvimento do seu navegador. Sim, você tem.... rsss...

 

Se estiver no chrome, aperte CTRL+i e vai abrir uma área de desenvolvimento, mas não se assuste... vá até a aba network ou rede em português e veja cada requisição acontecendo... Tem um botão com simbolo de proibido, ele limpará o histórico para facilitar.... limpe-o e faça a sua requisição... veja qual URL ele está tentando acessa e como ele está fazendo...

 

 

Aqui um print do que estou falando... aconteceu um POST na URL do youtube que resultou em um 200 (OK/sucesso).

 

image.png.327d23e930ee58d4fa704451b689b6fb.png

Share this post


Link to post
Share on other sites
Em 21/05/2019 at 12:58, Michael Granados disse:

@SrTunes

 

Como diria Jack, vamos por partes...

 

Primeira dúvida... Sobre o trecho do $.getJSON('/busca.php', { busca: valor }, fn);

 

Por ser GET, a jQuery vai entender que se trata de um valor para apendar/adicionar/concatenar a sua URL, só que de forma mais segura, então você não precisa se preocupar em escapar caracteres como + ou &. Desta forma, digamos que valor tenha o conteúdo de pipoca. Então a jQuery vai montar a URL como /busca.php?busca=pipoca.

 

Agora, o valor vem de uma instrução um pouquinho mais pra cima... 


var valor = this.value;

No caso, this é o input onde você está colocando o texto e value é o valor desse mesmo input. A jQuery utiliza muito essa notação.

 

Sobre a segunda dúvida, acho que vale a pena analisar o que está sendo enviado para o servidor utilizando a ferramenta de desenvolvimento do seu navegador. Sim, você tem.... rsss...

 

Se estiver no chrome, aperte CTRL+i e vai abrir uma área de desenvolvimento, mas não se assuste... vá até a aba network ou rede em português e veja cada requisição acontecendo... Tem um botão com simbolo de proibido, ele limpará o histórico para facilitar.... limpe-o e faça a sua requisição... veja qual URL ele está tentando acessa e como ele está fazendo...

 

 

Aqui um print do que estou falando... aconteceu um POST na URL do youtube que resultou em um 200 (OK/sucesso).

 

image.png.327d23e930ee58d4fa704451b689b6fb.png

 

E ae Michael! Cara, depois de tanto tempo estou de volta.

Seguinte, fica tranquilo que eu sei como funciona as ferramentas de desenvolvedor de página da web. (Valeu mesmo)

 

Caaaara, você fez quase todo o script pra mim. rs Muitíssimo obrigado.

Mas vamos lá, tudo que me explicou aqui foi de extrema valia, linha por linha. Você é muito bom, poderia dar aulas, se já não dá. rs Como falei antes, como não tenho conhecimento em javaScript, é exatamente lá que estou apanhando para entender. Osso.

 

Já saquei como é a requisição get com json e a sua implementação faz o trabalho da requisição certinho. Entendi também como funciona a parte do this.valor, perfeito.

a parte do:

$.getJSON('config/busca.php', { busca: valor }

busca e responde com o valor certinho. Agora como eu pego o dado da resposta que veio assim:

{"erro":false,"dados":{"descricao_item":"Cisco SFP-GE-T"}}

e mando para o campo de id="descricao"? Como funciona a lógica?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Cesar Melo
      Olá. Gostaria de uma opinião sobre onde focar meus estudos para trabalhar com PHP.
      Atualmente tenho conhecimentos com a linguagem PHP, e os seguintes frameworks: Bootstrap e Jquery.
      Recentemente fiz um curso de Laravel+materialize e gostei muito desse framework. Meu primeiro contato com framework para backend e pretendo utilizar o Laravel daqui pra frente nos meus estudos.
       
      Minha questão é a seguinte, quero dar continuidade aos meus estudos para me qualificar para o mercado de trabalho, mas não sei exatamente os próximos cursos que vou estudar.
      Não sei se atualmente há uma combinação de frameworks mais utilizada ou requisitada no mercado de trabalho. Ex: Laravel+vue+bootstrap, ou laravel+angularjs+materialize, tipo isso.
       
      Dei uma pesquisada no google e youtube, e notei que não há muito conteúdo de cursos por exemplo de Laravel+angularjs.
      Procurando algumas vagas de emprego, notei que há grande procurar para profissionais com qualificação em Laravel, e tambem grande procura para profissionais com qualificação em AngularJs, porém vagas distintas. Acho que não vi nenhuma vaga que peça Laravel+AngularJs.
       
      Alguém aí pode me passar uma visão ou dar sua opinião sobre isso, para eu focar meus estudos? Alguém sabe o que andam usando bastante? Ou que seja indicado de trabalhar em conjunto com PHP?
       
      Ah, uma observação... atualmente meu foco são de projetos voltados para sistemas, admin, etc. Não tenho muito perfil para projetos de marketing ou que exijam um frontend "lindo". rsrs.
       
      Grato...
    • By Gemenson Miranda
      Oi pessoal, estou com um problema na minha hospedagem LInux do Godaddy, publiquei meu site, fiz o apontamento correto do banco de dados, mas quando acesso a URL o site me exibe HTTP ERROR 500 exibe realizei a configuração do arquivo .htaccess, alterei as permissões para (755), nada disso resolve... A questão e que sempre que comento as informações de apontamento do banco de dados no arquivo index.php o site carrega normalmente, porem sem conexão com o bando mysql, o que me faz pensar que o erro pode esta relacionado ao banco mysql, porem não consigo visualizar o erro por que a tela fica toda branca e não retorna nada, como resolver esse erro ou ao menos exibir qual erro causa ele?? agradeço!
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By TheRonaldoStar
      Oi, mais cedo eu fiz um post aqui no site mas um pouco longo creio eu que e mais fácio eu fazer uma pergunta mais direta.
      A pergunta é:
      Como posso fazer agrupamentos de uma tabela através de dois campos cujo os valores são =, mesmo que esteja invertidos?
      EX: [DE = "1"], [PARA = "2"].
      E fazer o agrupamento ou só mostrar o ultimo cadastro mesmo que eles estejam invertidos desta forma?
      EX: [DE = "2"], [PARA = "1"].
       
      Acho que agora com este post fui mais claro, Alguém pode me ajudar por favor??.
      Atenciosamente,
      ~Ronaldo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.