How to convert form data into JSON (Beginner) in jquery? - php

Question

I am trying to send data using AJAX to PHP page. I am getting all the data from the form and I am trying to convert it to JSON. However, .stringify() doesn't do the job for me.
Here is my code:
<script>
$(document).ready(function(){
console.log("Ready..");
$("#profile-form").submit(function(event){
var data = $(this).serialize();
console.log(JSON.stringify(data));
$.ajax({
type : "POST",
url : "profile.php",
data : JSON.stringify(data),
success : function(response){
alert(response);
}
});
});
//$("#profile-form").submit();
});
</script>
I am able to see the form-data on the console. However, I am not getting any JSON data on the server. I have just done print_r($_POST['data']) in my profile.php page. However, it says variable data not defined.

Answer 1

since you already serialize your data. no need to use JSON.stringify it.
also add an option dataType : json
$.ajax({
type : "POST",
url : "profile.php",
data : data,
dataType : 'json',
success : function(response){
console.log(response);
}
});
also on your PHP. you should do
print_r($_POST);

Answer 2

There should be no $_POST['data'] available because the data you are sending is saved directly in $_POST variable, which should be accessible with print_r($_POST) or print_r(json_decode(print_r($_POST))) (since you have stringified it.)

Answer 3

According to documentation,
The .serialize() method creates a text string in standard URL-encoded notation.
Just something like single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1
It is not what you want, actually.
You can simply generate a JavaScript object and serialize it:
$.ajax({
type : "POST",
url : "profile.php",
data : 'data=' + JSON.stringify({
"name": $("#name").val(),
"password": $("#password").val()
})
}).done(function(dt) {
});
At the server-side, $_POST['data'] will contain the JSON representation of your form.
It may be automated. Read these articles on how to do the universal solution:
Convert form data to JavaScript object with jQuery
Serialize form data to JSON