How to use JSON with Jquery?

Question

I'm working at an app which would make a POST ajax request to a PHP script on my server. The script would query the database and return a row of records, as an array. (One array for each row, containing elements such as id, title, etc). I then want to use json_encode() to encode this array, and pass it back to the javascript which will use it to display the records.

1) How can I return the JSON encoded string to the javascript? 2) How will the javascript loop through the rows and access their fields?

Answer 1

To get JSON with jQuery, just use jQuery.getJSON(). Alternatively, you can use any other AJAX tool and then just eval() the json to get a javascript object.

To loop through an array, I usually use jQuery.each():

var recordList = yourMethodToGetRecordListWithAjax();

jQuery.each(recordList, function()
{
    alert(this.Name); // For example
});

Answer 2

You can return the JSON encoded string to the JS by echoing it with a Content-Type of application/json.

See above answer for the rest.

Answer 3

1) in the php script:

$return["foo"]  = "bar";
$return["blah"] = "bleg";
print json_encode($return);

2) in the javascript:

      $.ajax({
      type: "POST",
      url: URL,
      cache:false,
      data: values,
      dataType:'json',
      success: function(json)
                   {
     var foo = json.foo;
                    if (json.blah == "bleg")
                    { 
                       // do stuff 
                    }

     }  // end success function
    });  // end ajax call