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

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.

This isn't going to send json to server. Show how you are trying to receive in your php. There is no point in using JSON.stringify when `serialize()` returns a form encoded string — charlietfl, Dec 11 '15 at 08:29

roullie · Answer 1 · 2015-12-11T08:38:44.800

3

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);

edited Dec 11 '15 at 08:38

answered Dec 11 '15 at 08:30

roullie

2,830
16
26

this `dataType` is actually for "The type of data that you're expecting back from the server." So it doesn't relate to his problem. – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Dec 11 '15 at 08:35
@roullie It gives me a XHR failed loading:.. I can see the form data. However, I am not getting any response. – Nevermore Dec 11 '15 at 09:51
@roullie data type json doesnt work.. however, when I removed the datatype: json. It showed me my response. Thanks for the imitation – Nevermore Dec 11 '15 at 09:54

score 1 · Accepted Answer · answered Dec 11 '15 at 08:32

1

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.)

answered Dec 11 '15 at 08:32

Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ

4,151
1
19
54

However I have one query. I am able to see all my form data in the address bar. How do I clear it after I get the response? I tried location.reload() however it did'nt work. – Nevermore Dec 11 '15 at 10:00
Which data you are talking about? – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Dec 11 '15 at 10:05
The form data which I sent thro my html form and then I got a response from Ajax. However, I am still able to see my form data in the URL. Even though I am sending data using POST – Nevermore Dec 11 '15 at 10:07
I am not yet sure about the reason for this. But you can try not to use `JSON.stringify`. Just send like `data : data` and you can get the data from `$_POST` without `json_decode` – Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ Dec 11 '15 at 10:15

score -1 · Answer 3 · edited May 23 '17 at 12:04

-1

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

edited May 23 '17 at 12:04

Community

1
1

answered Dec 11 '15 at 08:33

Yeldar Kurmangaliyev

33,467
12
59
101

and why wouldn't it be what is wanted? Your object will be converted to exactly the same format. `dataType` only tells jQuery what to expect in response – charlietfl Dec 11 '15 at 08:36
@charlietfl This AJAX converts the OP's form into JSON and sends to the server. Why doesn't it makes sense? `serialize` is not a function which should be used in this case. – Yeldar Kurmangaliyev Dec 11 '15 at 08:42
Absolutely nothing wrong with using serialize to send data. Unless you send this json with appropriate content type, $_POST will be empty at server since you aren't send key/value pair – charlietfl Dec 11 '15 at 08:44

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

3 Answers3