Using JavaScript to submit form data with HTTP request same like ajax form serialize

Question

In jQuery, we have $('form').serialize() to post all the form data in a single line. Is there any method available in JavaScript to post form data like this or is there an alternative in JavaScript for the code below code?

var url = "path.php"; 
$.ajax({
       type: "POST",
       url: url,
       data: $("#idForm").serialize(), //like this i need in js
       success: function(data)
       {
       }
});

Answer 1

You can use FormData, like this:

let data = new FormData(document.querySelector('form'));

And then:

let request = new XMLHttpRequest();
request.open("POST", "url");
request.send(data);

More info: FormData API

I hope it helps you

Answer 2

Serialize is creating a parameter string like field1=value1&field2=value2

When using the jquery ajax, the data can provided as object or array

var x = document.getElementById("myForm");
var formData = [];
var i;
for (i = 0; i < x.length; i++) {
    formData[x.elements[i].name] = x.elements[i].value;
}

$.ajax({
       type: "POST",
       url: url,
       data: formData
       success: function(data)
       {
       }
});