Skip to content

December 6, 2010

14

Posting JSON data from Ext JS to PHP

by Joe Kuan

I have got a Ext-JS web application which needs to send a group of object data to the PHP server side, then processes and stores them. However, it is easier and less effort to pack the Javascript objects in JSON and POST to the server side. Then on PHP side decodes the receiving JSON string and extracts necessary data and stores them. It took me a while to analyse and debug what the problem was and here is how to do it.

Ext-JS

Assume you have an object, dataObj, which is converted into JSON and sent it down via Ajax request.

  Ext.Ajax.request({
    url: '/saveData.php',
    success: function() { Ext.Msg.alert('Success'); },
    failure: function() { Ext.Msg.alert('Fail'); },
    jsonData: Ext.util.JSON.encode(dataObj)
    });

The above example is the proper way to POST JSON data in Ext-JS (it will be explained later). Do not use ‘params: { dataObj: Ext.util.JSON.encode(dataObj) }‘ because both can change the content of the HTTP Request packet to very different.

The following is the dissected HTTP request packet of the JSON data when used as jsonData config.

The following is the dissected HTTP request packet when used as part of the URL params object:

As you can see, this changes the Content-Type in HTTP POST request packet sending to the server. This has significant implication to the PHP server side on how it interprets the data.

PHP

On the server side, PHP sees the POST data as name and value pairs as part of a normal URL. With the JSON data sending via the params config, PHP treats the whole JSON expression as URL name and value pairs. However, there are specific characters in JSON that have special uses when used in PHP string, so PHP will automatically escape the JSON expression string. If you try to do a var_export($_POST[‘dataObj’], true) into a file, then you will see the effect of single quoting the string as literal and escaping the double quotes, etc.

‘{\\"filters\\":{\\"series_id\\":0,\\"time_from\\":\\"2 ….}’

That will result later json_decode call to return NULL.

The interesting thing is when you pass the JSON string in jsonData, you won’t see anything at all in the $_POST variable. It is just an empty array. This is because the Content-Type in the Request packet is different now, application/json. The JSON expression string in the HTTP Body part indicates it is not URL name and value pairs. In order to access that JSON string, you have to use the global variable, $HTTP_RAW_POST_DATA which no string formatting is performed. Then you can safely use json_decode to parse the JSON string into either PHP object or associative array.

If you really need to send a JSON string as well as some URL parameters, it is better to add those parameters into the Javascript object before encoding into JSON expression. The POST body part can only be used for one purpose.

Advertisements
14 Comments Post a comment
  1. Apr 3 2011

    Hi Joe,

    Thanks for posting this article. Fortunately, and unusually, I read it before I hit the problem. This made it very useful.

    I note you went to Southampton Uni, as did I. I took my MSc in Microelectronics Systems Design there (run jointly with Brunel). It was only a one year course, but I enjoyed my time there. After many years in ASIC chip development I retired and now have fun with PHP and Javascript.

    Reply
    • Joe Kuan
      Apr 4 2011

      Thanks for your comment. Small world. I would imagine software is much easier than chip development.

      Regards
      Joe

      Reply
  2. Arlina
    Jun 25 2011

    I had tried with no luck dumping the contents of $_GET, $_POST and even $_REQUEST, and none of them contained the JSON string I knew was being sent from my ExtJs script.
    Your explanation made this clear. Thanks a million!

    Reply
  3. Jul 15 2011

    Made my day! Thank you.

    Reply
  4. Aug 5 2011

    Thank you! You saved me from hours spent googling around :D

    Reply
  5. Aug 7 2011

    I was going crazy! Thanks!

    Reply
  6. agvstin
    Sep 28 2011

    Thanks!
    Solved my problem :)

    Reply
  7. Oct 20 2011

    This might also do the trick :-)

    $data = file_get_contents(“php://input”);
    json_decode($data);

    Reply
  8. Dec 14 2011

    And how to enable old method posting data to server? In Extjs 3 all data send inside POST body and can be easy retrieved by $_POST array in PHP

    Reply
    • Joe Kuan
      Dec 23 2011

      You have to use json_decode on the PHP side to extract the name & value pairs from $HTTP_RAW_POST_DATA.

      Reply
      • Dec 26 2011

        yes, I knew how to extract extjs 4 data on php side. I don’n know how to turn on extjs3 behavior, where I get all variables in $_POST. Thanks anyway ;)

      • Joe Kuan
        Dec 31 2011

        I am not sure I understand your question fully but I try to answer.

        You have to put the POST parameters into the object at the Javascript side before passing as jsonData. Then uses json_decode on $HTTP_RAW_POST on the PHP side, then extract the POST parameters.

        Hope this helps
        Joe

  9. shilpa
    Aug 24 2012

    Really good tip. saved my loads of time. I changed my content type of my form in extjs it worked absoultely brillant

    Reply
    • EricB
      Sep 4 2012

      Thanks, you saved me some much time !

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: