Jquery send Json data not working

Question

I want to sent some JSON data with ajax this is my script

$(document).ready(function () {
    jsonObj = [];
    $('.img-bg').map(function () {
        var self = this;
        var next = $(this).nextAll('.rectangle');

        if (next.length > 0) {
            next.map(function () {
                item = {};
                item.src = self.src;
                item.left = $(this).css('left');
                item.height = $(this).css('height');

                jsonObj.push(item);
            });
        }


});
var data={ "firstName" : "Ray" };
jsonString = JSON.stringify(jsonObj);


        $.ajax({
            url: 'testajax.php',
            type: 'post',
            dataType: 'json',
            data: jsonString,
            success: function(response) {
              console.log(response);

            }

        });

    });


</script>

And jsonObj gives

[Object, Object, Object]
0: Object
height: "341px"
left: "10px"
src: "http://localhost/docAuto/test.jpg"
__proto__: Object
1: Object
height: "321px"
left: "54px"
src: "http://localhost/docAuto/image.jpg"

Output of jsonString

[{"src":"http://localhost/docAuto/test.jpg","left":"10px","height":"341px"},
{"src":"http://localhost/docAuto/image.jpg","left":"54px","height":"321px"},
{"src":"http://localhost/docAuto/image.jpg","left":"43px","height":"295px"}]

Both var is not send, but if I send data it's working. My Json file is wrong?

I check code- it's working

Vasiliy vvscode Vanchuk
– Vasiliy vvscode Vanchuk

2014-03-14 18:36:41 +00:00
Commented Mar 14, 2014 at 18:36 — Vasiliy vvscode Vanchuk
– Vasiliy vvscode Vanchuk, Commented Mar 14, 2014 at 18:36

Ketola · Accepted Answer · 2014-03-14 18:49:57Z

1

You need to pass the options to data as an object. Here's a fixed $.ajax call:

    $.ajax({
        url: 'testajax.php',
        type: 'post',
        dataType: 'json',
        data: { json : jsonString },
        success: function(response) {
          console.log(response);
        }
    });

Your testajax.php should now see the jsonString in URL variable json.

edit: fixed my response. I misread your code due to the problems with indentation.

edited Mar 14, 2014 at 18:49

answered Mar 14, 2014 at 18:38

Ketola

2,76720 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

konadrian Over a year ago

Yes It's my actual code if I move jsonObj = []; out from $(document).ready() it's still not working

Ketola Over a year ago

Sorry. I misread your code initially, and thought $.ajax() was outside $(document).ready(). Please see my revised answer.

Jason Fingar Over a year ago

This should work, but why convert the json object to a string, and then put it back into an object? Why not just pass the original object as your data parameter?

Ketola Over a year ago

I believe depending on the jQuery version an array of objects might not be encoded properly to a query string. Also different backends handle such query strings (a[0]=1&a[1]=2) differently. It's always safe to pass an encoded JSON string and let the backend handle decoding and JSON to Object mapping.

Jason Fingar · Accepted Answer · 2014-03-14 18:45:40Z

0

You don't need to use JSON.stringify to send a json object via the jQuery $.ajax() method... jQuery will take care of that conversion behind the scenes. Just use jsonObj as your data parameter.

answered Mar 14, 2014 at 18:45

Jason Fingar

3,3781 gold badge26 silver badges27 bronze badges

1 Comment

Quentin Over a year ago

You do need to use JSON.stringify to send JSON. If you pass a JavaScript object to data then it will covert it to form encoded data, not JSON.

Ananthan Unni · Accepted Answer · 2014-03-14 18:53:27Z

0

You need to use POST in upper case.

answered Mar 14, 2014 at 18:53

Ananthan Unni

1,30410 silver badges24 bronze badges

Comments

jyrkim · Accepted Answer · 2014-03-14 20:01:56Z

0

I think your JSON is missing the key part. When I added the key: 'first', it worked. You got one mighty Json Array there:

JSON.stringify({ first: [{"src":"http://localhost/docAuto/test.jpg","left":"10px","height":"341px"},
 {"src":"http://localhost/docAuto/image.jpg","left":"54px","height":"321px"},
 {"src":"http://localhost/docAuto/image.jpg","left":"43px","height":"295px"}] })

JSFiddle link http://jsfiddle.net/jyrkim/suvG7/1/

Json Arrays, syntax etc link

edited Mar 14, 2014 at 20:01

answered Mar 14, 2014 at 19:53

jyrkim

2,8791 gold badge26 silver badges35 bronze badges

Collectives™ on Stack Overflow

Jquery send Json data not working

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related