0

Olá, eu tenho uma página HTML com um formulário, o formulário possui 4 campos, nessa pagina eu quero preencher os campos (de forma aleatória) e pesquisar os dados conforme o que eu preenchi.

Para isso estou utilizando AJAX com jQuery, para não ocorrer refresh, os dados pesquisados serão inseridos na mesma página. Uma das regras é que, quando eu pesquisar sem inserir nenhuma informação, ocorra a busca de todos os dados do meu banco.

Hoje, se eu clicar em "Pesquisar" sem preencher, eu busco todas as informações do meu banco e apresento elas na tela, se eu preencher alguma informação e clicar em pesquisar, todas as informações são puxadas igual.

O responsável pela pesquisa dos dados é um arquivo PHP, que gera um JSON que é lido pela minha página de pesquisa, nessa página PHP, para teste, fiz um if para verificar se o $_POST['pNome'] era vazio, e ele estava vazio, porém não consegui descobrir o motivo dele ir vazio, sendo que tenho uma tela de cadastro parecida funcionando.

Código HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap com rodapé inferior</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="../../../_css/bootstrap.css" rel="stylesheet">
        <link href="../../../_css/estilo.css" rel="stylesheet">
        <script src="../../../_js/jQuery.js"></script>
        <script src="../../../_js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="wrapper" class="container-fluid">
            <div class="row">
                <div class="col-lg-2 col-lg-offset-5 col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-4 col-xs-offset-4" id="logo">
                    <img src="../../../_image/_logos/logo.png" class="img-responsive img-circle">
                </div>
            </div>
            <div class="row" >
                <nav class="navbar navbar-inverse">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="../../">Meu site</a>
                        </div>
                        <ul class="nav navbar-nav">
                            <li><a href="../../../">Home</a></li>
                            <li><a href="../../servicos/">Serviços</a></li>
                            <li><a href="../../contato/">Contato</a></li>
                            <li><a href="../../painel-administrativo/">Painel administrativo</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="./"><span class="glyphicon glyphicon-log-out"></span> Logoff</a></li>
                        </ul>
                    </div>
                </nav>
            </div>
            <div class="body-content">
                <div class="row">
                    <form id="formPesquisaUsers">
                        <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-2 form-group">
                            <label for="matricula">Matricula</label>
                            <input type="tel" name="pMatricula" placeholder="Matricula" id="matricula" class="form-control">
                        </div>
                        <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-0 form-group">
                            <label for="nome">Nome</label>
                            <input type="text" name="pNome" placeholder="Nome" id="nome" class="form-control">
                        </div>
                        <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-2 form-group">
                            <label for="sobrenome">Sobrenome</label>
                            <input type="text" name="pSobrenome" placeholder="Sobrenome" id="sobrenome" class="form-control">
                        </div>
                        <div class="col-lg-3 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-4 col-sm-offset-0 form-group">
                            <label for="login">Login</label>
                            <input type="text" name="pLogin" placeholder="Login" id="login" class="form-control">
                            <input type="submit" value="Pesquisar" class="btn btn-block btn-primary margin15Top">
                        </div>
                    </form>
                </div>
                <div class="row" id="dadosPesquisados">

                </div>
            </div>
            <footer id="rodape">
                <div id="divRodape" class="col-lg-12 col-lg-offset-0">
                    <p>&copy; Conteúdo do rodapé</p>
                </div>
            </footer>
        </div>
        <script>
            $("#formPesquisaUsers").submit(function (e){
                e.preventDefault();
                var dadosForm = $(this);
                buscarDados(dadosForm);
            });

            function buscarDados(dados){
                $.ajax({
                    type: 'POST',
                    data: dados.serialize(),
                    url: "controllerPesquisaUsuarios.php",
                    async: false
                }).done(function(){
                    var dadosEncontrados = "";
                    $.getJSON("controllerPesquisaUsuarios.php", function(dadosJSON){
                        verificaBackground = false;
                        $.each(dadosJSON, function(i, valor){
                            if(verificaBackground){
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-1 divBackground'>";
                                dadosEncontrados += "Matricula: " + valor.idUsuario;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-0 divBackground'>";
                                dadosEncontrados += "Nome: " + valor.nome;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-1 divBackground'>";
                                dadosEncontrados += "Sobrenome: " + valor.sobrenome;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-0 divBackground'>";
                                dadosEncontrados += "Login: " + valor.login;
                                dadosEncontrados += "</div>";
                                verificaBackground = false;
                            } else {
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-2 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-1'>";
                                dadosEncontrados += "Matricula: " + valor.idUsuario;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-0'>";
                                dadosEncontrados += "Nome: " + valor.nome;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-1'>";
                                dadosEncontrados += "Sobrenome: " + valor.sobrenome;
                                dadosEncontrados += "</div>";
                                dadosEncontrados += "<div class='col-lg-2 col-lg-offset-0 col-md-3 col-md-offset-0 col-sm-5 col-sm-offset-0'>";
                                dadosEncontrados += "Login: " + valor.login;
                                dadosEncontrados += "</div>";
                                verificaBackground = true;
                            }
                        });
                        console.log(dadosEncontrados);
                        $("#dadosPesquisados").html(dadosEncontrados);
                    })
                }).fail(function(){
                    alert("erro");
                });
            }
        </script>
    </body>
</html>

Código PHP:

<?php
    require_once '../../../_models/Conexao.php';
    require_once '../../../_models/Usuario.php';
    $con = new Conexao();
    $user = new Usuario($con->criaConexao());
    $info = $user->buscaUsuariosPorPesquisa($_POST['pMatricula'], $_POST['pNome'], $_POST['pSobrenome'], $_POST['pLogin']);
    echo json_encode($info);

OBS: Meu método do objeto $user está funcionando corretamente, mesmo assim estou disponibilizando a função para vocês.

Função de pesquisa:

function buscaUsuariosPorPesquisa($matricula, $nome, $sobrenome, $login){
        try {
            $dados = ['idUsuario' => $matricula, 'nome' => $nome, 'sobrenome' => $sobrenome, 'login' => $login];
            $sql = "SELECT * FROM usuarios ";
            foreach ($dados as $key => $value) {
                if(!empty($value)){
                    if(!strpos($sql, "WHERE")){
                        $sql .= "WHERE ";
                    }
                    $sql .= "{$key} = '{$value}' ";
                    if(!empty(next($dados))){
                        $sql .= "AND ";
                    }
                } else {
                    if(!empty(next($dados)) && strlen($sql) > 29){
                        $sql .= "AND ";
                    }
                }
            }

            $st = $this->conexao->prepare($sql);
            $st->execute();
            $st->setFetchMode(PDO::FETCH_OBJ);
            return $st->fetchAll();
        } catch (Exception $ex) {
            return $ex;
        }
    }

A minha conclusão é que minha página PHP fica com as variáveis $_POST todas vazias, mas por que disso?

Desde já, agradeço pela ajuda

1 Resposta 1

0

Print sua variável dados no javascript após o serialize.

console.log(dados);

Provavelmente vai mostrar algo como

single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

Se você mandar isso para o PHP como POST, vai ir tudo em uma string só. Você deve mandar um objeto.

{
   'chave1': 'valor1',
   'chave2': 'valor2'
}

No PHP, print a variável $_POST.

var_dump($_POST);

E veja o que está recebendo.

Pesquise sobre serializeArray, ou tipos de dados em JSON com Ajax que você deve encontrar uma resposta.

1
  • Olá Éverton, desculpe a demora, acabei tendo que me distanciar desse projeto, porem trabalhando em outros projetos encontrei uma solução, a função $.post do jQuery, recomendo quem está com problema parecido estudar o mesmo. Documentação: api.jquery.com/jQuery.post Commented 5/09/2019 às 13:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .