jQuery to PHP via AJAX using JSON

By Sam Deering

This is how you can generate data for use with AJAX using a “POST” method which contains JSON data and then pass it to a PHP script and then decode ready to use as variables (name value pairs). In this example, I’ve used form input values to generate the data passed as a JSON string, but you can create your own JSON data to pass doesn’t have to be from a form.

jQuery / AJAX

Basic AJAX function to pass the JSON data to the server-side script.

   type: "POST",
   url: targetURL,
   async: false,
   data: JSON.stringify($('#form').serializeArray()),
   success: function(data){
      return true;
   complete: function() {},
   error: function(xhr, textStatus, errorThrown) {
     console.log('ajax loading error...');
     return false;

If we take a look at the generated JSON is has name value pairs.

Generated JSON example:

data=[{"name":"product","value":"riserva shiraz wine glass"},{"name":"supid","value":"81"},{"name":"brandid","value":"60"},{"name":"blid","value":"7"},{"name":"cid","value":"381"}];

PHP Variable Dynamics

// decode JSON string to PHP object, 2nd param sets to associative array
$decoded = json_decode($_GET['data'],true);

output values:
foreach ($decoded as $value) {
   echo $value["name"] . "=" . $value["value"];

//set values:
foreach ($decoded as $value) {
    $$value["name"] = $value["value"];

foreach ($decoded as $value) {
    $$value["name"] = $value["value"];
    echo $value["name"] . "=" . $$value["name"];
    echo "
"; }

Sorry, no demo, but feel free to ask questions.

  • Greg

    curious how this would work – diff methods, and how would json data be passed from a form as a single value? :)

  • Madhulika

    Hi. This is exactly what i was looking for. However, I have a doubt –
    My php file is located on my localhost. So in my ajax call url, i have written:

    url: “http://localhost/connection.php”,

    The php loads fine. However, the php code does not work. I am sending form inputs as a json string via ajax to my php, using the following call:

    $(document).ready(function () { $(“#btn”).click( function() { var id = $(‘#id’).val(); var name = $(‘#name’).val(); var Address = $(‘#Address’).val(); var person = new Array(); person[0] = id; person[1] = name; person[2] = Address; var topost; $.ajax({ url: “http://localhost/connection.php”, type: “POST”, data : {topost : JSON.stringify(person)}, datatype: “json”, success: function(data) { alert(data); } }); //return false; }); });

    And my php looks like this:

    What am i doing wrong in getting the json from the html? Is the function file_get_contents correct here?

  • Baba

    I have simple form(Parent Form) and created button on it. On button I have called JQuery Ajax Request and data is populated in Div (Child Form). Now I would like to copy it’s content to parent form. Please help

  • lumix

    $decoded = json_decode($_GET[‘data’],true);
    it says
    Notice: Undefined index: data in /Users/ririn/Sites/StudyJSON/res2.php on line 3

  • Bengalaa

    i am following this tutorial, it is neat! it was just what i was looking for.

    some of you are having the same problem: there is nothing on the $_GET variable. Searching for help, found this:

    It seems like you have to get the JSON from a file o_O, try this:


  • asd

    it is like shit, diff methods, get and post

  • Rosan Asoncy

    I think you have error. You have POST type for ajax, but try to get data in php with $_GET



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.