Get data from PHP array via AJAX and jQuery

Question

I have a page as below:

<head>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#prev').click(function() {
  $.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=testdata',
  cache: false,
  success: function(result) {
    $('#content1').html(result[0]);
  },
  });
});
});
</script>
</head>
<body>
<table>
<tr>
<td id="prev">prev</td>
<td id="content1">X</td>
<td id="next">next</td>
</tr>
</table>
</body>

and a php file ajax.php to handle ajax requests as;

<?php
$array = array(1,2,3,4,5,6);
echo $array;
?>

But when I click, I am getting A instead of array[0]. How can I fix this?

score 59 · Accepted Answer · edited Feb 08 '14 at 21:37

59

you cannot access array (php array) from js try

<?php
$array = array(1,2,3,4,5,6);
echo json_encode($array);
?>

and js

$(document).ready( function() {
    $('#prev').click(function() {
        $.ajax({
            type: 'POST',
            url: 'ajax.php',
            data: 'id=testdata',
            dataType: 'json',
            cache: false,
            success: function(result) {
                $('#content1').html(result[0]);
            },
        });
    });
});

edited Feb 08 '14 at 21:37

Nutty Nur

101
3
14

answered Jun 18 '11 at 11:43

genesis

50,477
20
96
125

Yes,it is also the answer i'm looking for.Thanks~ – Simon Wang Apr 17 '13 at 07:12

score 26 · Answer 2 · answered Jan 29 '14 at 09:10

26

quite possibly the simplest method ...

<?php
$change = array('key1' => $var1, 'key2' => $var2, 'key3' => $var3);
echo json_encode(change);
?>

Then the jquery script ...

<script>
$.get("location.php", function(data){
var duce = jQuery.parseJSON(data);
var art1 = duce.key1;
var art2 = duce.key2;
var art3 = duce.key3;
});
</script>

answered Jan 29 '14 at 09:10

ballsDeep

281
3
2

1

+ 1 for `jQuery.parseJSON(data);` solved my problems !! – T.Todua Oct 23 '14 at 20:31
Just a note. jQuery.parseJSON is deprecated in latest versions of JQuery. Use JSON.parse instead. – ASammour May 28 '19 at 21:09
spent hours trying to figure this out. My mistake was I had to parse the json THEN try to access the keys. – 730wavy Oct 25 '22 at 05:49

score 8 · Answer 3 · answered Jun 18 '11 at 11:44

When you echo $array;, the result is Array, result[0] then represents the first character in Array which is A.

One way to handle this problem would be like this:

ajax.php

<?php
$array = array(1,2,3,4,5,6);
foreach($array as $a)
    echo $a.",";
?>

jquery code

$(function(){ /* short for $(document).ready(function(){ */

    $('#prev').click(function(){

        $.ajax({type:    'POST',
                 url:     'ajax.php',
                 data:    'id=testdata',
                 cache:   false,
                 success: function(data){
                     var tmp = data.split(",");
                     $('#content1').html(tmp[0]);
                 }
                });
    });

});

score 3 · Answer 4 · answered Jun 18 '11 at 12:20

you cannot access array (php array) from js try

<?php
$array = array(1,2,3,4,5,6);
echo implode('~',$array);
?>

and js

$(document).ready( function() {
$('#prev').click(function() {
  $.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=testdata',
  cache: false,
  success: function(data) {
    result=data.split('~');
    $('#content1').html(result[0]);
  },
  });
});
});

JohnP · Answer 5 · 2011-06-18T11:48:06.103

1

When you do echo $array;, PHP will simply echo 'Array' since it can't convert an array to a string. So The 'A' that you are actually getting is the first letter of Array, which is correct.

You might actually need

echo json_encode($array);

This should get you what you want.

EDIT : And obviously, you'd need to change your JS to work with JSON instead of just text (as pointed out by @genesis)

edited Jun 18 '11 at 11:48

answered Jun 18 '11 at 11:43

JohnP

49,507
13
108
140

@genesis, you're right of course. Noted in the answer, thanks. – JohnP Jun 18 '11 at 11:48

Get data from PHP array via AJAX and jQuery

5 Answers5

Linked