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 Carcleo
      A ideia:
       
      toda e entrada no site, seja com link direto do tipo:
       
      www.site.com.br/pasta1/pasta2/arquivo.php  
      ou normal url amigável
       
      www.site.com.br/categoria/tipo  
      tudo queria que redirecionasse para o index.php da raiz do site.
       
      E que, caso o arquivo ou pasta NÃO existisse, abrisse normalmente a pagina 404.php
       
       
      Tentei de tres formas mas nenhuma dá certo.
       
      Primeira forma
      RewriteEngine On ErrorDocument 400 http://www.sortecard.com.br/index.php ErrorDocument 401 http://www.sortecard.com.br/401.php ErrorDocument 403 http://www.sortecard.com.br/403.php ErrorDocument 404 http://www.sortecard.com.br/404.php ErrorDocument 500 http://www.sortecard.com.br/500.php php_value allow_url_fopen on php_value allow_url_include on php_flag mail_filter 0 RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteCond %{SCRIPT_FILENAME} !-f RewriteCond %{SCRIPT_FILENAME} !-d RewriteRule ^(.*)$ index.php?page=$1 Segunda forma:
      Options +FollowSymLinks DirectorySlash On RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f [OR] RewriteCond %{REQUEST_FILENAME} \.php$ RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php?request=$1 [L] Terceira forma:
      RewriteEngine On ErrorDocument 400 http://www.sortecard.com.br/index.php ErrorDocument 401 http://www.sortecard.com.br/401.php ErrorDocument 403 http://www.sortecard.com.br/403.php ErrorDocument 404 http://www.sortecard.com.br/404.php ErrorDocument 500 http://www.sortecard.com.br/500.php php_value allow_url_fopen on php_value allow_url_include on php_flag mail_filter 0 RewriteCond %{HTTP:X-Forwarded-Proto} !https RewriteCond %{HTTPS} off RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301] RewriteRule ^(.*)$ index.php?page=$1 Problemas:
       
      A) Quando acesso a url diretamente não está redirecionando para o index.
      B) Quando falo que é para redirecionar todos os arquivos ele não me dá os parêmetros. 
    • By Pellegrini3834
      Ola galera do IMasters!!!!!!
       
      Estou com uma duvida eu tenho um CRUD em php MVC e queria saber em que camada fica as mensagens depois de uma realização de um evento por exemplo:
      Cadastro de Pessoa, depois de cadastrada quero que ele emita uma mensagem dizendo que a "PESSOA FOI CADASTRADA COM SUCESSO!!!!" e eu queria saber  em que parte ela fica se é no Controle ou na View porque sabemos que no modelo fica a parte referente a manipulação de dados.
      Obrigado.
    • By Henrique Augusto Rohloff
      Olá! Sou iniciante e estou treinando para configurar uma página de buscas de produtos em um banco de dados.
      Os produtos já estão sendo encontrados quando a palavra bate com os itens do banco. A conexão com o banco de dados está funcionando corretamente. Porém, quando nada é encontrado, queria que aparecesse uma mensagem "Nenhum resultado, tente novamente." Já tentei com  else de tudo que é jeito mas não aparece corretamente... Qual é o jeito certo?
       
      Segue o código:
       
       
    • By maruoppolo
      Olá, tenho 2 tabelas:
       
      tb_dados: ID - MUSICA
       
      tb_votos: ID - VOTO - RADIO - MUSICA
       
      Preciso fazer uma query que traga as musicas da tb_dados porém ordenando pelo número de votos que ela teve na tb_votos.
       
      Então assim, existem 2 tipos de voto 1 = like e 2 = dislike, cada ver que um usuário vota eu pego qual radio que ele esta ouvindo e salvo no campo radio, o id da musica na tb_dados e salvo no campo musica da tb_votos e coloco o número 1 para like e 2 para dislike no campo voto.
       
      A query precisa contar quantos likes teve na tv_votos filtrando por radio e mostrando os resultados em ordem decrescente as musicas com mais likes.
       
      A ideia é trazer as 10 musicas com mais like de cada radio
       
      Alguma ideia de como fazer?? Estou enroscado nisso a dias.
×

Important Information

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