Error - Passing an array from PhP to jQuery using JSON

Question

I apologise, since I know this has been asked before, more than once.

I've been struggling with this little bugger for quite a few hours now, and I cannot seem to find my mistake.

The problem is simple - I have a PhP array which I want to pass over, from the server side to the client side, using jQuery AJAX with the data in JSON format.

The code for my Client-side Ajax call is

$.ajax({
  url: 'php/test/pass_array.php',
  method: 'POST',                            
  data: {test1: 'abc', test2: 'cde'}, //Random input data
  dataType: 'json',
  success: function(response_data)
  { 
    console.log(response_data);

  },
  error: function(jqXHR, textStatus, errorThrown) 
  {
    console.log(arguments);
    console.log('Error: ' + errorThrown + ' ' + textStatus + ' ' + jqXHR);
  }
});

And the code for my server-side pass_array.php script is

header('Content-type: application/json; charset=utf-8');

echo json_encode(array("Name"=>"Johnny"));  //Build JSON object from the array

As you can see, this is pretty basic, but it's not working. On the client side, the AJAX response is never received.

When I check the browser console log, I get

Error: SyntaxError: Unexpected token  parsererror [object Object]

What the devil am I doing wrong?

All my files are in UTF-8 encoding. This also works if I remove the dataType: 'json' and the heading() on the PhP side. In that case, I get the following string:

{"Name":"Johnny"}

UPDATE

Commenting out the header() code in the PhP side makes the console show the following error:

Uncaught SyntaxError: Unexpected token o

How can there by syntax errors? I create a PhP array and encode it using json_encode.

UPDATE #2

Fixed it.

On my PhP file I had (only one more!) line

include '../core/db_io.php';

I commented that line out and it worked fine.

This file contains methods to query my databases. Since I did not call any methods or objects from this file, I left it uncommented - thinking it made no difference.

It looks like including that db_io.php file added a Byte Order Mark character (\ufeff) to the JSON string.

The complete string being sent to the Client side was

\ufeff{"Name":"Johnny"}

It seems this db_io.php file was encoded with BOM. Changing its encoding (using notepad++) fixed that.

Amazing how a simple include instruction can mess up an AJAX call.

From that error it looks like you're trying to parse what is already a parsed object. Is this really the entire code? — Johan Lindskogen, Dec 09 '13 at 01:27
Thanks for the responses. KaiHogan, I tried doing that and I get "Uncaught SyntaxError: Unexpected token" But the JSON string is built directly from PhP json_encode, without any other source. Why is there an issue with its syntax? — PDoria, Dec 09 '13 at 01:31
Ndushi actually the client-side is wrapped around a .php file. Which means that I echo the jQuery code and run the page from my web server. Other than that, yes - it is the entire code. — PDoria, Dec 09 '13 at 01:33
Does your server side script have an end tag? Try removing it if it does. — Anthony, Dec 09 '13 at 01:42
Check the "Network" tab in Chrome's inspector to find out whats happening in the AJAX call. — Mr. Meeseeks, Dec 09 '13 at 01:51
Already doing that Fabricio, and nothing else of relevance is showing on the log. — PDoria, Dec 09 '13 at 01:51
Weird, try to check the response data in the way Vincent suggested. My guess is that PHP is outputting some warning/notice or something else before the JSON string. — Fabrício Matté, Dec 09 '13 at 01:52
The 'include' instruction was in the way. I still don't understand how it interferes tho, since I don't call any of its methods or objects. — PDoria, Dec 09 '13 at 02:03
Anthony, in the Network log I see "POST" requests, one for every time the AJAX call was fired. They all returned "200 OK". — PDoria, Dec 09 '13 at 02:08
You can view the response of the AJAX calls if you select the POST request~ — Mr. Meeseeks, Dec 09 '13 at 02:28

Mr. Meeseeks · Answer 1 · 2013-12-09T01:55:26.493

1

Make sure your PHP script starts with <?php

Update 1:

I made two files on my localhost - index.html

<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>

<script>
$.ajax({
    url: 'pass_array.php',
    method: 'POST',
    data: {test1: 'abc', test2: 'cde'}, //Random input data
    dataType: 'json',
    success: function(response_data)
    {
        console.log(response_data);
    },
    error: function(jqXHR, textStatus, errorThrown) 
    {
        console.log(arguments);
        console.log('Error: ' + errorThrown + ' ' + textStatus + ' ' + jqXHR);
    }
});
</script>
</body>
</html>

pass_array.php

<?php

header('Content-type: application/json; charset=utf-8');

echo json_encode(array("Name" => "Johnny"));

The result of the AJAX call in the console is:

Object {Name: "Johnny"}

Make sure the url is correctly accessing the right php file.

You can check any "XHR" requests (AJAX) in Chrome's inspector under the "Network" tab.

edited Dec 09 '13 at 01:55

answered Dec 09 '13 at 01:32

Mr. Meeseeks

1,841
2
21
37

It does. The code works fine unless I change the AJAX call to have JSON data – PDoria Dec 09 '13 at 01:36
I got my code to work on my localhost. I didnt use `header` in my php code and I copied your javascript. What browser are you using? – Mr. Meeseeks Dec 09 '13 at 01:37
Chrome and Firefox. I get an equivalent error in both. Did you get it to work with JSON dataType? – PDoria Dec 09 '13 at 01:39
If you open developer tools in Chrome, click "Network" and then select "XHR" at the bottom, you can see what AJAX calls are being made. You may have to refresh the page to see the AJAX call. – Mr. Meeseeks Dec 09 '13 at 01:40

score 1 · Answer 2 · answered Dec 09 '13 at 01:38

1

Try checking out if your ajax function is being triggered and if any request is even being sent to your php code. For example maybe there is some syntax in your ajax script or you have not provided the url of your php file.

answered Dec 09 '13 at 01:38

akki

2,021
1
24
35

It is, I've debugged it. I also know that the ajax success code is never run, unless I remove the JSON dataType. – PDoria Dec 09 '13 at 01:40
plz post the structures of your directory if possible. – akki Dec 09 '13 at 01:55

score 1 · Accepted Answer · answered Dec 09 '13 at 01:57

1

Fixed it.

On my PhP file I had (only one more!) line

include '../core/db_io.php';

I commented that line out and it worked fine.

This file contains methods to query my databases. Since I did not call any methods or objects from this file, I left it uncommented - thinking it made no difference.

I still don't understand tho - I'm not using that file in any way - other than include it. Why should it interfere?

Thanks for the ideas. Peace!

answered Dec 09 '13 at 01:57

PDoria

552
2
11
25

Also worth mentioning - This single line was all that stood between me and 4 hours of head banging against the wall. – PDoria Dec 09 '13 at 01:58
See the network tab, including that file probably caused a notice/warning/error (or something else) to be outputted. – Fabrício Matté Dec 09 '13 at 02:00
I uncommented the include line and checked the network tab log - No errors were shown. I see the POST requests, but they all return 200 OK. – PDoria Dec 09 '13 at 02:06
Click in the request there and check the "Response" tab in the newly opened panel. `=]` – Fabrício Matté Dec 09 '13 at 02:08
I see. For some reason, including the db_io.php file added a BOM character to the JSON string - \ufeff. I still don't understand why though. – PDoria Dec 09 '13 at 02:16
2

Your `db_io.php` file is probably encoded in UTF with BOM I believe. You can use a program like notepad++ to encode it in UTF-8 without BOM or hex edit it. – Fabrício Matté Dec 09 '13 at 02:22
Thank you very much Fabricio, I'll do just that. – PDoria Dec 09 '13 at 08:11

score 0 · Answer 4 · answered Dec 09 '13 at 01:40

0

Error: SyntaxError: Unexpected token

U have problems with 'token' variable. Mb u use CMS or Framework?

Try

console.log(arguments);

And also, u can try send

header('Content-type: application/json');

answered Dec 09 '13 at 01:40

Виктор Новиков

273
6
18

No CMS or Framework, only jQuery and pure PhP 5.4, with Notepad++, and my Web Server is WAMP - Maybe that's the problem? – PDoria Dec 09 '13 at 01:49

Error - Passing an array from PhP to jQuery using JSON

UPDATE

UPDATE #2

4 Answers4