Pass PHP Array to script through jquery $.ajax() in Wordpress

Question

I have a big array() in DOM.

<div id="array"><?php echo serialize($bigArray); ?></div>

I need to pass this data through ajax in my wordpress theme.

$(document).on('click','#somewhere',function(){
        var datas = $('#array').html();
        $.ajax({
            url : ajax_object.ajaxurl,
            type : 'post',
            data : {
                action:'wordpress_action',
                array: datas
            },
            success: function(res) {
                console.log(res);
            }
        });
    })

And in my php script:

add_action('wp_ajax_wordpress_hook', 'my_func');
add_action('wp_ajax_nopriv_wordpress_hook', 'my_func');

function my_func(){
    $data = unserialize($_POST['array']);
    print_r($data);
    die();
}

But this seems not working.

Any suggestion? How can I pass php array through ajax? json_encode? php session?

I changed my post. I have wrong to write it! – Rock Apr 12 '17 at 13:38 — Rock, Apr 12 '17 at 13:38

score 1 · Accepted Answer · edited May 23 '17 at 11:54

On the server you should embed your $bigArray in JSON format into an HTML data attribute.

PHP's JSON-encoding function is called json_encode() (not serialize(), which does something entirely different).

<div id="array" data-entities="<?php htmlspecialchars(json_encode($bigArray)) ?>">
  ... regular HTML here ...
</div>

You always need to call htmlspecialchars() when you write data to HTML.

On the client you can access the data attribute with jQuery's .data() method.

For transport via HTTP you need to re-encode the data as JSON. Javascript's JSON-encoding function is called JSON.stringify(). See: How can I use JQuery to post JSON data?

$(document).on('click', '#somewhere', function () {
    $.ajax({
        url: ajax_object.ajaxurl,
        type: 'post',
        contentType: 'application/json',
        data: JSON.stringify({
            action: 'wordpress_action',
            array: $('#array').data('entities')
        })
    }).done(function (res) {
        console.log(res);
    });
});

victor · Answer 2 · 2017-04-12T13:58:52.980

try something like this:

echo "<script type=\"text/javascript\">\n";
echo "var strJson = " . json_encode($bigArray) . "\n";
echo "var arrAsObj = JSON.parse(strJson)\n";
echo "</script>\n";

now you should have access to these two variables on the page. You should be able to pass 'arrAsObj' in the request body of your ajax post. If you have trouble make sure that this script is placed BEFORE the ajax call in the html file.

score 0 · Answer 3 · answered Apr 12 '17 at 14:09

Thank you Tomalak, with your suggestion I solved my error, but I edited your code.

<div id="array" data-value="<?php echo htmlspecialchars(json_encode($bigArray)) ?>">

$(document).on('click','#somewhere',function(){
        var datas = $('#array').data('value');
        $.ajax({
            url : ajax_object.ajaxurl,
            type : 'post',
            data : {
                action:'wordpress_action',
                array: datas
            },
            success: function(res) {
                console.log(res);
            }
        });
    })

Then in PHP script:

add_action('wp_ajax_wordpress_hook', 'my_func');
add_action('wp_ajax_nopriv_wordpress_hook', 'my_func');

function my_func(){
    $data = $_POST['array'];
    print_r($data);
    die();
}

This works like I expected

Pass PHP Array to script through jquery $.ajax() in Wordpress

3 Answers3