Send variables via GET by php Ajax

To send data with jQuery.ajax , simply enter the data attribute in the configuration. This attribute will contain the information that should be sent, either via POST or GET, for example:

$.ajax({
    url: 'api.php',
    type: 'GET',
    dataType: 'html',
    data: $("form[name=\"formularioBusca\"]").serialize()
})

The $(elemento).serialize(); is used to capture and convert (to the default application/www-url-encoded ) all fields of the form.

In HTML, you must add the type="button" attribute to the button element. This will cause the client to not be redirected by clicking it.

Html:

<form method="GET" name="formularioBusca">
    <input type="text" id="from-airport" name="Origem" class="form-control" placeholder="Onde você esta?"  autocomplete="off" required="required">
    <input type="text" id="to-airport" name="Destino" class="form-control" placeholder="Para onde você quer ir?" autocomplete="off" required="required">

    <button type="button" class="btn btn-buscar-voos" id="buscarVoos" >BUSCAR VOOS</button>
</form>

JavaScript:

$(document).ready(function() {

    const URL_SEARCH = new URL(location.href);

    $("from-airport").val( URL_SEARCH.searchParams.get("Origem") );
    $("to-airport").val( URL_SEARCH.searchParams.get("Destino") );

    $('#from-airport').blur(function() {
        let partida = $(this).val();
        let palavras = partida.split(' ');
        let origem = [palavras.pop()];
        sigla = origem.toString().replace(/"/g, "").replace(/'/g, "").replace(/\(|\)/g, "");

        console.log(sigla);
    })
    $('#to-airport').blur(function() {
        let destino = $(this).val();
        let saida = destino.split(' ');
        let origem = [saida.pop()];
        siglaDestino = origem.toString().replace(/"/g, "").replace(/'/g, "").replace(/\(|\)/g, "");

        console.log(siglaDestino);
    })

    $('#buscarVoos').on('click', function(e) {

        history.pushState(null, null, "?" + $("form[name=\"formularioBusca\"]").serialize())

        $.ajax({
            url: 'api.php',
            type: 'GET',
            dataType: 'html',
            data: $("form[name=\"formularioBusca\"]").serialize()
        })
        .done(function(data) {
            console.log(data);
            $('#dynamic-content').html('');
            $('#exibeVoos').html(data);
            $('#modal-loader').hide();
        })
        .fail(function() {
            $('#dynamic-content').html('<i class="glyphicon glyphicon-info-sign"></i> Aguarde...');
            $('#modal-loader').hide();
        });
    })
})

In this way, your request will be sent to: http://www.YOUR-SITE.com/api.php?Origem=teste-origem&Destino=teste-destino , but the user will not see this request.

If you want to change the URL too (and not redirect), just use history.pushState , for example:

history.pushState(null, null, "?" + $("form[name=\"formularioBusca\"]").serialize())

And to capture the user's URL and fill in your form, just use the URL

  

If your form contains an upload field, I recommend link .