Send variables via GET by php Ajax

Question

I am creating a page in PHP that makes a query in a JSON/PHP via ajax and I need it to send to the URL, the form variables so I can make a query in this JSON/PHP.

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 class="btn btn-buscar-voos" id="buscarVoos" >BUSCAR VOOS</button></form>

Javascript:

    $(document).ready(function(){$('#from-airport').blur(function(){
    $('#buscarVoos').on('click', function(e){
        $('#from-airport').blur(function(){
            var partida = $(this).val();
            var palavras = partida.split(' ');
            var origem = [palavras.pop()];
            sigla = origem.toString().replace(/"/g, "").replace(/'/g, "").replace(/\(|\)/g, "");
            console.log(sigla);
        })
        $('#to-airport').blur(function(){
            var destino = $(this).val();
            var saida = destino.split(' ');
            var origem = [saida.pop()];
            siglaDestino = origem.toString().replace(/"/g, "").replace(/'/g, "").replace(/\(|\)/g, "");
            console.log(siglaDestino);
        })
    $.ajax({
                  url: 'api.php',
                  type: 'GET',
                  dataType: 'html'
                })
                .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();
                });
    })
})

Answer 1

To send data with jQuery.ajax, simply enter the attribute data 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(); serves to capture and convert (to default application/www-url-encoded), all the form fields.

In HTML, you need to add the attribute type="button" to the button element. This will cause the client not to be redirected by clicking on 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 as well (and without redirecting), just use the history.pushState, for example:

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

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

If your form contains an upload field, I recommend /a/279834/99718.