Search the database via AJAX c/ jQuery

Asked

Viewed 564 times

0

I have a user registration in which I type a CPF and when this field loses focus, the name field is filled c/ the user corresponding to that CPF. This search in the bank I am doing c/ jQuery and AJAX. I have done several searches (including here in the OS), but so far I could not solve. What is happening is q the name field remains blank after the CPF loses focus, i.e., it does not carry the user name. It follows the code in PHP:

Edit: I tried the $.ajax() method and still nothing appears; and now an error msg has appeared in the browser, which I understand, has to do with the HTML tags (says q expects an expression, but a tag has been found, but I don’t know what expression is this)Erro jQuery

buscarjQuery.php

<!DOCTYPE html>
<html>
<head>
    <title>Formulecs</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#cpf").blur(function(){
                /*$.get("search_cpf.php", function(resultado){
                    $("#nome").html(resultado);

                });*/
                //get input value
                var cpf = $("#cpf").val();
                if (cpf == '') $("#nome").val("CPF vazio, favor preencher");

                $.ajax({
                    type: "GET",
                    async: "true",
                    url: "search_cpf_mysqli.php",
                    dataType: "jsonp",
                    data: {cpf:cpf},
                    success: function(data){

                        //debug result console
                        console.log(data); 

                        //set input value
                        $("#nome").val(data);
                    }
                });
            });
        });
    </script>
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/jquery.maskedinput-1.1.4.pack.js"/></script>
</head>
<body>
    <form method="POST" action="found.php">
        <label for="cpf">CPF</label><br>
        <input type="text" name="cpf" id="cpf" required><br><br>

        <label for="nome">Nome</label><br>
        <input type="text" name="nome" id="nome" size="50" readonly><br><br>
        <button class="button">Buscar no banco</button>
    </form>
    <br><hr><br>
    <nav>
        <a href="index.php" type="button" role="button">Voltar para início</a>
    </nav>
</body>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#cpf").mask("999.999.999-99");
        });
    </script>

</html>

search_cpf.php

<?php
    $connect = mysqli_connect("localhost", "root", "", "test_jquery_ajax");

    if (isset($_GET["cpf"])) {
        $query = "SELECT nome FROM table_name_cpf WHERE cpf = '$_GET["cpf"]'";
        $result = mysqli_query($connect, $query);
        if (mysqli_num_rows($result) > 0) {
            while ($row = mysqli_fetch_array($result)){
                $output = $row["nome"];
            }
        }
    } else {
        $output = "Cliente não cadastrado";
    }
    echo $output;
?>
php jquery mysql ajax

  • Don’t manjo mt de php but I think you have to give a feedback and not an echo in this case.

1 answer

1

To do data searches via AJAX c/ jQuery you can use the following function $.ajax.

$(document).ready(function(){

    $("#cpf").blur(function(){

        //get input value
        var cpf = $('#cpf').val();

        $.ajax({
            type: "GET",
            async: "true",
            url: "search_cpf.php",
            dataType: "jsonp",
            data: {cpf:cpf},
            success: function(data){

                //debug result console
                console.log(data); 

                //set input value
                $("#nome").val(data);

            }

        });
    });
});

Browser other questions tagged php jquery mysql ajax

You are not signed in. Login or sign up in order to post.