How to do something asynchronous with jQuery, search in MySQL with PHP?

After a long time (I could not remember the question again) I found some Google searches. It's quite simple:

$.ajax({
    type: "GET",//Tipo da requisicao, pode ser GET, POST, etc...
    data: {dado1: "Dado 1",dado2: "Dado 2"},
    url: "url_do_arquivo_que_faz_as_coisas.php",
    beforeSend: function(){
        console.log("Isso executara antes da requisicao");
    }
    success: function(responses){
        console.log(responses);//Aqui são os dados vindos do PHP
    }
});

If it was not in PHP we would have something like this

echo $_GET['dado1'].' - '.$_GET['dado2'];

We would have the following in our console after making the AJAX request:

Dado 1 -Dado 2

I hope I have helped those who need it like I needed then. In addition, you should put the JS code in a function, so you can call when you want and as many times as you like, the rest and only modify ...

You can create a webservice to provide this data. Basically a file that will return only this data.

First create a file, ajax.php, for example. In it you make the query and write the result. To make it easier for you, I recommend that you print the parsed data in JSON.

In addition, in jquery you use the Ajax method $.ajax(options, callback)

Asynchronously it makes a request in the URL that you pass and when finished calls the callback. When you fall into the callback you treat the data you received, or a possible crash

You will have to have a page to receive this ajax request.

I explained below, the connection to the bank is fictitious, just to illustrate.

ajax.php

// Apenas para exemplificar uma conexão com o DB
include("conexao_db.php");

$sql = <<<SQL
    SELECT *
    FROM minha_tabela
    WHERE minha_condicao = 1;
SQL;

$resultado = $db->query($sql);
$dados = $resultado->fetchAll();
// - - - - - - - - - - - - - - 

// Parte importante
header("content-type: application/json");
echo json_encode($dados);

Then in your HTML you will make an AJAX request for the newly created page and include it in the current page.

index.html

<h3>Meus dados</h3>

<ul id="minha_lista"></ul>

<script type="text/javascript">
    // Faz um requisição para a página "ajax.php", recebe os dados do servidor
    // e adiciona na lista vazia acima
    $.getJSON( "ajax.php", function( data ) {
        var items = [];

        $.each(data, function( key, val ) {
            items.push( "<li name='" + key + "'>" + val + "</li>" );
        });

        $('#minha_lista').html(items.join(''));
    });
</script>