Keep in array the serialize

Asked

Viewed 84 times

2

In the example below, I do the serialize and already step straight in 'date', in ajax:

function filtrar() {

    $.ajax({
        type: 'post',
        dataType: "text",
        data: $('#filtros').serialize(),
        url: "request.php",
        cache: false,
        success:function(response){
            $('#result').html(response).show();
        },
        error:function(xhr, ajaxOptions, thrownError){
            $('#result').html('Erro: ' + thrownError).show();
        }
    });
}

Return: Array ( [datai] => 2019-10-29 [dataf] => 2019-10-30 )

But when I pass the values of serialize() by variable, it loses the array structure:

function filtrar() {

    const filtros = $('#filtros').serialize();
    const myData = {'filtros' : filtros};
    $.ajax({
        type: 'post',
        dataType: "text",
        data: myData,
        url: "request.php",
        cache: false,
        success:function(response){
            $('#result').html(response).show();
        },
        error:function(xhr, ajaxOptions, thrownError){
            $('#result').html('Erro: ' + thrownError).show();
        }
    });
}

Return: Array ( [filtros] => datai=2019-10-29&dataf=2019-10-30 )

  • There is the possibility to keep the array structure to pass as variable?
jquery ajax

2 answers

2


Like Victor said, use .serializeArray() but you need to create a JSON to pass the parameter filtros. Just use a .each() creating the JSON array items:

function filtrar() {

    const filtros = $('#filtros').serializeArray();
    const data = {}; // cria o objeto

    // cria o JSON
    $(filtros).each(function(index, obj){
       data[obj.name] = obj.value;
    });

    const myData = { 'filtros': data };
    $.ajax({
        type: 'post',
        dataType: "text",
        data: myData,
        url: "request.php",
        cache: false,
        success:function(response){
            $('#result').html(response).show();
        },
        error:function(xhr, ajaxOptions, thrownError){
            $('#result').html('Erro: ' + thrownError).show();
        }
    });
}

The result will be:

array(1) { ["filtros"]=> array(2) { ["datai"]=> "2019-10-29" ["dataf"]=> "2019-10-30" } }

  • Wouldn’t just be using the Json.Parse() in the variable filtros?

  • It does not work because the result of serialize is a string URL, like: datai=valor&dataf=valor.

  • serialize() yes, but serializeArray() would be elements of the array?

  • 2

    Works with JSON.parse(JSON.stringify(filtros));, but the array goes with the keys name and value.

  • I’m testing as I follow you, and for now, I haven’t got anything other than the answer. I thought jQuery would have something better for this.

  • Understood and thank you @Sam!

  • I hope I helped you at least a little bit then! @Rbz

  • @Sam When using multiselect it gives problem. Would have some way to fix?

  • @Rbz I’ll take a look and talk to you later.

Show 4 more comments

0

You can get the same result by storing it in the variable using the method serializeArray()

 const filtros = $('#filtros').serializeArray();

I use it this way and it works great for me.

You can see more in the documentation of serializeArray method()

  • Victor, it’s not the same result, it generates name and value, then the treatment is different.

Browser other questions tagged jquery ajax

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