how to send JSON array through ajax?

Question

var storeSettings = [];

                        obj.find(o_widgetClass).each(function(){
                            var storeSettingsStr          = {};
                            storeSettingsStr['id']        = $(this).attr('id');
                            storeSettingsStr['style']     = $(this).attr('data-widget-attstyle');
                            storeSettingsStr['title']     = $(this).children('header').children('h2').text();
                            storeSettingsStr['hidden']    = ($(this).is(':hidden') ? 1 : 0);
                            storeSettingsStr['collapsed'] = ($(this).hasClass('powerwidget-collapsed') ? 1 : 0);
                            storeSettings.push(storeSettingsStr);
                        }); 

                        var storeSettingsObj = JSON.stringify( {'widget':storeSettings} );

                        /* Place it in the storage(only if needed) */
                        if(getKeySettings != storeSettingsObj){
                            //alert(storeSettingsObj);
                            var memberfilter = new Array();
                            memberfilter[0] = "id";
                            memberfilter[1] = "style";
                            var jsonText = JSON.stringify(storeSettings, memberfilter);
alert(jsonText);


   // it gives this result 
[{"id":"widget1"},{"id":"widget3","style":"black"},{"id":"widget4"},{"id":"widget5"},{"id":"widget2","style":"black"},{"id":"widget6"},{"id":"widget7"},{"id":"widget9"},{"id":"widget8"},{"id":"widget10"},{"id":"widget12"},{"id":"widget13"},{"id":"widget11"},{"id":"widget14"}]

Now how can i send it through jquery ajax ? i am trying with the below mentioned code but not yet able to do get data on server

$.ajax({
    type: 'POST',
    url: 'get_query.php',                      
    data: "test="+jsonText,
    success: function(data) {
        alert(data);
        }
});

So could you plz explain how to send and then how to get this data ? i have tried with json_decode but not working for me.

EDITED after xdazz comment to send it without stringify

Got this when i print_r($_POST['test'])

Array

( [0] => Array ( [id] => widget1 [title] => Hidden widget [hidden] => 1 [collapsed] => 0 )

[1] => Array
    (
        [id] => widget3
        [style] => red
        [title] => Icons
        [hidden] => 0
        [collapsed] => 0
    )

[2] => Array
    (
        [id] => widget4
        [style] => black
        [title] => No toggle button
        [hidden] => 0
        [collapsed] => 0
    )

[3] => Array
    (
        [id] => widget5
        [title] => No delete button
        [hidden] => 0
        [collapsed] => 0
    )

[4] => Array
    (
        [id] => widget6
        [title] => No edit button
        [hidden] => 0
        [collapsed] => 0
    )

[5] => Array
    (
        [id] => widget7
        [title] => Not fullscreen button
        [hidden] => 0
        [collapsed] => 0
    )

[6] => Array
    (
        [id] => widget9
        [title] => No custom button
        [hidden] => 0
        [collapsed] => 0
    )

[7] => Array
    (
        [id] => widget8
        [title] => Not sortable
        [hidden] => 0
        [collapsed] => 0
    )

[8] => Array
    (
        [id] => widget10
        [title] => Collapsed widget
        [hidden] => 0
        [collapsed] => 1
    )

[9] => Array
    (
        [id] => widget12
        [title] => Auto refresh
        [hidden] => 0
        [collapsed] => 0
    )

[10] => Array
    (
        [id] => widget2
        [style] => black
        [title] => Basic widget
        [hidden] => 0
        [collapsed] => 0
    )

[11] => Array
    (
        [id] => widget13
        [title] => No timestamp
        [hidden] => 0
        [collapsed] => 0
    )

[12] => Array
    (
        [id] => widget11
        [title] => Ajax
        [hidden] => 0
        [collapsed] => 0
    )

[13] => Array
    (
        [id] => widget14
        [title] => No refresh button
        [hidden] => 0
        [collapsed] => 0
    )

)

xdazz · Accepted Answer · 2012-10-05 06:19:59Z

5

You don't need to stringify the object, use it directly for the data property.

$.ajax({
    type: 'POST',
    url: 'get_query.php',                      
    data: {test: myvariable},
    success: function(data) {
      alert(data);
    }
});

Then in the php side, do var_dump($_POST['test']); to see what you get.

answered Oct 5, 2012 at 6:19

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

6 Comments

atif Over a year ago

Got this : string(360) "[{\"id\":\"widget1\"},{\"id\":\"widget3\",\"style\":\"black\"},{\"id\":\"widget4\",\"style\":\"black\"},{\"id\":\"widget5\"},{\"id\":\"widget6\"},{\"id\":\"widget7\"},{\"id\":\"widget9\"},{\"id\":\"widget8\"},{\"id\":\"widget10\"},{\"id\":\"widget12\"},{\"id\":\"widget2\",\"style\":\"black\"},{\"id\":\"widget13\"},{\"id\":\"widget11\"},{\"id\":\"widget14\"}]" Now what ? cuz json_decode is not working on it

xdazz Over a year ago

@atif Did you use the object myvariable directly, note not the result after JSON.stringify

atif Over a year ago

! can you plz have a look at complete code now ??? and no i cannot see the object directly, it gives this when alert [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

xdazz Over a year ago

@atif Don't use the result of JSON.stringify, and check what you get in the php side.

xdazz Over a year ago

@atif Actually, it is said in my answer.

|

Arfeen · Accepted Answer · 2012-10-05 06:22:27Z

2

You may try this:

$.ajax({
        type: 'POST',
        url: 'get_query.php',                      
        data: jsonText,
        contentType: "application/json",
        success: function(data) {
            alert(data);
            }
    });

but on the PHP side, you would need $GLOBALS["HTTP_RAW_POST_DATA"]; to receive the JSON data.

answered Oct 5, 2012 at 6:22

Arfeen

2,6235 gold badges30 silver badges49 bronze badges

1 Comment

Arfeen Over a year ago

try adding a property processData: false,

nitish rawat · Accepted Answer · 2016-01-04 05:28:03Z

0

<script>
var information = ['hi','hello'];
$.ajax({
    type: "POST",
    data: {info: information, "action": "getUserRecords"},
    url: "/var/www/pinboard/wp-content/themes/pinboard/userinfo.php",
    success: function(msg) {
        $('.userDetail').html(msg);
    }
});
</script>

answered Jan 4, 2016 at 5:28

nitish rawat

1

Collectives™ on Stack Overflow

how to send JSON array through ajax?

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related