How do I convert formdata to json?

Asked

Viewed 3,741 times

5

I have the following code:

var form = new FormData();
form.append('user',$("#user").val());
form.append('password',$("#password").val());
var data = JSON.stringify($(form).serialize());

but var 'data' is being null, look at the example: https://jsfiddle.net/e5p00evx/

The intention is to send this data using $.ajax:

$.ajax({
    url: "http://localhost:29199/default.aspx?tipo=autenticar",
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    type: 'POST',
    xhr: function () {
        var myXhr = $.ajaxSettings.xhr();
        if (myXhr.upload) {
            myXhr.upload.addEventListener('progress', function (s) {
                console.log('PROGRESSO', s); 
            }, false);
        }
        return myXhr;
    },
    success: function (a, b, c) {
        console.log('SUCESSO', a, b, c);
    },
    error: function (a) { console.log('ERROR', a); }
});

On the server side I already have a structure to receive json and deserialize it in object.

javascript jquery json
  • 1

    The Formdata and the serialize are alternative. How to send this data to the server?

  • You need what’s in Formdata before you send it?

  • Actually I want to send a form with only a parameter "query", this will have json converted into Base64, but for this I need to be able to convert the data from the initial form to json. form -> add all information to form; data -> convert form data to json; form -> add a "key" param with the value "data" convert to Base64;

  • 1

    Formdata’s idea is to be impervious to attempts to manipulate data on the client’s side. That is, when you insert something inside, you can’t take it out anymore. If that’s enough, use Formdata, otherwise you have to use Base64 .serialize() but passing the element of the DOM and not the Formdata.

  • I get it, being John is sad! rsrs... found the solution to my problem: https://jsfiddle.net/e5p00evx/2/ is much simpler than I expected, I needed to find some way to generate a json without concatenating strings. Thank you.

  • Then you should have an element <form> and then use something like this: https://jsfiddle.net/rek9brh0/

Show 1 more comment

1 answer

2


The idea of Formdata is to be impervious to attempts to manipulate data on the client’s side.

That is, when you insert something inside, you can’t take it out. If that’s enough, use FormData, this ensures that the browser only talks to the server without unwanted looks.

Otherwise using Base64 you have to use something to make a string with input data. You can use jQuery (.serialize() or .serialize()) and then you have to attribute name elements/inputs, and passing the DOM element and not the Formdata.

With Formdata:

var Dados = new FormData(); 
Dados.append('user', $("#user").val());
Dados.append('password', $("#password").val()); 

// ou passando o <form> diretamente:

var Dados = new FormData(document.querySelector('form')); 

$.ajax({
  url: "http://localhost:29199/default.aspx?tipo=autenticar",
  data: Dados,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

With jQuery (I leave the Base64 conversion to your will as there are several libraries to choose from):

var Dados = $(this).serialize(); 

// ou:

var Dados = JSON.stringify($(this).serializeArray()); 

$.ajax({
  url: "http://localhost:29199/default.aspx?tipo=autenticar",
  data: Dados,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

jsFiddle: https://jsfiddle.net/rek9brh0/

Note: On base 64 on MDN In English

Browser other questions tagged javascript jquery json

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