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 Good
      Boa tarde,
       
      temos um servidor na amazon, e o site está direcionado para o servidor. Estamos tendo um problema, de vez em quando o servidor cai. 
       
      Gostaríamos de saber se tem algum programa no ubuntu, que monitore qual arquivo que teve alto consumo. Para sabermos se o código está escrito de maneira complexa, causando a queda do servidor.
       
      Eu lembro que uma vez a hostgator mandou um relatório, avisando que tal arquivo estava consumindo muito do servidor. É possível fazer esse monitoramento? Não temos como ficar 24h olhando por exemplo o htop..
       
      Aguardo uma resposta,
      obrigado!
    • By Marcos RJ
      Caros colegas. Tudo bem?
       
      Tenho uma loja virtual do qual tem foi integrado o Paypal. Para isso, fiz dessa forma. 
       
      $statusCompras = "<form action=\"https://www.paypal.com/cgi-bin/webscr\" method=\"post\">            <input type=\"hidden\" name=\"cmd\" value=\"_xclick\" />            <!--Vendedor e URL de retorno, cancelamento e notificação-->            <input type=\"hidden\" name=\"business\" value=\"vendas@sitecliente.com.br\" />            <input type=\"hidden\" name=\"return\" value=\"http://www.sitecliente.com.br/retorno/\" />            <!--Internacionalização e localização da página de pagamento-->            <input type=\"hidden\" name=\"charset\" value=\"utf-8\" />            <input type=\"hidden\" name=\"lc\" value=\"BR\" />            <input type=\"hidden\" name=\"country_code\" value=\"BR\" />            <input type=\"hidden\" name=\"currency_code\" value=\"BRL\" />            <!--Informações sobre o produto e seu valor-->            <input type=\"hidden\" name=\"amount\" value=\"".$valorCarrinho."\">            <input type=\"hidden\" name=\"item_name\" value=\"Servico\" />            <input type=\"hidden\" name=\"item_number\" value=\"".$jmNumPedido->NumPedido."\">            <input type=\"hidden\" name=\"quantity\" value=\"1\" />";            $statusCompras .= "<button type='submit' class='btn btn-danger' style='color: #FFF; font-weight: bold'>";            $statusCompras .= "Aguardando Pagamento<br>";            $statusCompras .= "<span style='font-weight: normal'>Para efetuar seu pagamento<br>clique aqui!</span>"; Estou passando o número do pedido pelo item_number, porém o cliente está reclamando que não está conseguindo identificar a compra, pois muitos deles acabam se logando com os dados de terceiros e também acabam usando o cartão de terceiros. Minha intenção era passa o número do pedido pelo item_number para facilitar a identificação, mas acho que não funcionou. Alguém poderia me ajudar nisso? Sei que existe API, mas estou tendo dificuldades nisso. 
       
      Muito obrigado!!
    • By thejhunior
      Faz um tempo que não mexo com ASP classico, precisa de uma ajuda
       
      Em uma tabela mysql, tenho a tabela de produtos, e na coluna categoria que armazena o ID de uma categoria, gostaria de ao invés de armazenar apenas um ID, gostaria de armazenar varios IDs. Como se o produtos fizesse parte de varias categorias
       
      Minha duvida e como no select poderia buscar um produtos de categoria x em uma tabela com dados separados em "," "01.02,03"
       
       
    • By asacap1000
      Galera estou com uma dúvida, tenho a parte de envio de dados para em Post, com encode json e curl. Já pesquisei em todos os lugares e não encontrei nada pra clarear as idéias.
       
      a parte final é essa do envio (cliente)
      header("Content-Type: ".$mediaType); $headers = array(); $headers[] = "Accept: ".$mediaType; $headers[] = "Accept-Charset: ".$charSet; $headers[] = "Accept-Encoding: ".$mediaType; $headers[] = "Content-Type: ".$mediaType.";charset=".$charSet; $headers[] = "Authorization: Basic ".$AuthorizationHeaderBase64; $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS,"contatos=$contatos"); #campos que serão enviados curl_setopt($ch, CURLOPT_USERPWD, $AuthorizationHeaderBase64); curl_setopt($ch, CURLOPT_HEADER, $headers); curl_setopt($ch, CURLINFO_HTTP_CODE, true); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);#ativa se for ter retorno do chamada $result = curl_exec($ch); $result2 = json_decode($result,true); curl_close($ch); if($result2 === false) { $err = 'Curl error: ' . curl_error($ch); $result2 = $err; echo "This is text".$err; } var_dump ($result2);  
      Preciso de ajuda para entender como deve ser feito a página que será chamada, no caso lado servidor.
       
      Como pode ver tenho um header configurado e será enviado com chave de autorização agora como isso é feito do lado servidor??
       
      Se alguém puder me ajudar, preciso entregar este webservice sexta feira 18/10. Todos os dados recebidos serão salvos no BD Oracle.
       
       
×

Important Information

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