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 henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By Jack Oliveira
      Boa noite pessoal
       
       
      Quero fazer uma verificação em tempo real no banco de dados antes de clicar para cadastra, ver se o nome que esta no input name="nome_empresa_link"   ver se ele já existe no banco de dados. no caso so permitir preencher outro campos se o input que esta sendo verificado estiver correto ou seja tudo ok...
       
      Lembrando este input ele é preenchido conforme é digitado no input name="nome_empresa"  Não sei se isso interfere ao fazer a verificação
       
      HTML
             <div class="col-md-6">         <div class="form-group">          <label for="nome_empresa">Nome</label>          <input type="text" autocomplete="off" id="nome_empresa" maxlength="100"  name="nome_empresa" class="form-control input_nome_empresa" required placeholder="Nome da Loja">        </div>      </div>      <div class="col-md-6">       <div class="form-group">        <label for="nome_empresa_link">Url Amigavél</label> <em id="resposta"></em>        <input type="text" autocomplete="off"  id="nome_empresa_link" name="nome_empresa_link" maxlength="100" class="form-control input_nome_empresa_link" required placeholder="/ Use maiúsculas, minúsculas e underline.">        <?= $site; ?><span><em style="color: green;" id="nome_empresa_link"></em>/</span>      </div>    </div> No PHP fazer verificação fiz isso...
      <?php if(isset($_POST['nome_empresa_link'])) { $nome_empresa_link=$_POST['nome_empresa_link']; $checkdata = DBCount('ws_empresa','nome_empresa_link',"WHERE nome_empresa_link = '{$nome_empresa_link}'"); if ($checkdata >= 0) { //echo "Um nome igual este já esta sendo usado no sistema"; swal('Atenção!!!', 'A URL AMIGAVÉL não disponivél para cadastro \n tente com outro nome!', 'warning', 'Fechar'); } /*else { echo "<font color='green'>Disponivél...</font>"; } */ exit(); } ?> No ajax fiz assim
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script language="javascript"> var nome_empresa_link = $("#nome_empresa_link"); nome_empresa_link.blur(function() { $.ajax({ url: 'notificacao/checkdata.php', type: 'POST', data:{"nome_empresa_link" : nome_empresa_link.val()}, success: function(data) { console.log(data); data = $.parseJSON(data); $("#resposta").text(data.nome_empresa_link); } }); }); </script> Só que não retorna nada
       
       
    • By DuduBacteria
      Tenho uma Tabela chamada "VENDAS" com os seguintes atributos:
       
       
      Eu quero retornar em MySQL o total de vendas ocorridos durante 1 semana, entre o dia atual até seis dias atrás.
       
      Ficando mais ou menos assim:
       
      SEMANA              TOTAL DE VENDIDO segunda                250.00 domingo                430.00 sábado                 160.50 sexta                  300.03 quinta                 300.03 quarta                 300.03 terça                  300.03
    • By terra
      Olá,
       
      preciso enviar os últimos 10 registros para um único e-mail, mas o código abaixo esta enviando separado
       
       
      agradeço qualquer ajuda
    • By eStevo2734
      Pequei esse código, porém não funciona por nada pela minha capacidade que não é muita em PHP, já mudei ele de todas as formas possível e não funciona.
       
      <?php if(!empty($_FILES['xml']['tmp_name'])){ $arquivo = new DomDocument(); $arquivo->load($_FILES['xml']['tmp_name']); //var_dump($arquivo); $linhas = $arquivo->getElementsByTagName("processo"); //var_dump($linhas); $primeira_linha = true; foreach($linhas as $linha){ if($primeira_linha == false){ // pegar o valor natureza="Produtos e/ou Serviço" no elemento <marca> $nome = $linha->getElementsByTagName("nome")->item(0)->nodeValue; echo "Nome: $nome <br>"; $email = $linha->getElementsByTagName("status")->item(1)->nodeValue; echo "Status: $email <br>"; echo "<hr>"; } $primeira_linha = false; } } ?>  
      O arquivo em XML é beemmm longo
      <?xml version="1.0" encoding="UTF-8" ?> <revista numero="2620" data="23/03/2021"> <processo numero="922151156" data-deposit <despachos> <despacho codigo="IPAS009" nome="Publ </despachos> <titulares> <titular nome-razao-social="HERIK DE </titulares> <marca apresentacao="Mista" natureza="P <nome>SOTEN</nome> </marca> <classes-vienna> <classe-vienna codigo="27.5.1" edicao <classe-vienna codigo="28.3" edicao=" <classe-vienna codigo="26.2.7" edicao <classe-vienna codigo="29.1.15" edica </classes-vienna> <lista-classe-nice> <classe-nice codigo="41"> <especificacao>Agente artístico; li <status>Pendente</status> </classe-nice></lista-classe-nice> <procurador>TENAX SERVIÇOS DE CONSULTOR </processo> <processo numero="920178898"> <despachos> <despacho codigo="IPAS029" nome="Defe </despachos> <titulares> <titular nome-razao-social="DEIVISSON </titulares> <lista-classe-nice> <classe-nice codigo="25"> <especificacao>Bandanas;Bermudas;Bo <status>Deferida</status> </classe-nice> </lista-classe-nice> </processo> Os valores que estou tentando pegar são <nome>
      <status>. Mas também queria tentar pegar os
      valores nome-razao-social="..." e natureza. Penso que
      pode ter algo a ver com o tamanho do arquivo que é um
      pouco maior do que o habitual, girando em torno de
      30 MB e no total vão ter que tirar as informações 22 109
      que é o número de vezes que esse modelo de exemplo
      se repete no documento Mas como disse não sei muito
      sobre PHP é uma suposição)...
×

Important Information

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