Help with JSON + jQuery + PHP Tutorial

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

Help with JSON + jQuery + PHP Tutorial

Post by Bbob »

Hi

Can anyone please teach me how to use JSON, jQuery & PHP in a code?

Ex.

json.php

Code: Select all

<?php
$hi = 1 + 3;
$hello = 9 + 4;
$bye = 7 + 6;

echo $hi;
echo $hello;
echo $bye;
?>
jquery.php

Code: Select all


<html>
<script type="text/javascript">
$(document).ready(function()
{
    $('#hi'.load(json.php).show())
    $('#hello'.load(json.php).show())
    $('#goodbye'.load(json.php).show())
}
)
</script>

<body>
<div id = "hi"></div>
<div id = "hello"></div>
<div id = "bye"></div>
</body>
</html>
My code is very very wrong...

Basically what I want to do is to separate the strings that I echoed from json.php so I could put them in their respective divs in jquery.php
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Help with JSON + jQuery + PHP Tutorial

Post by Eran »

What you writing in json.php is not JSON. Please read a little about what is JSON and try again - http://www.json.org/js.html
And you should be using one request for all three divs (otherwise, you don't need JSON at all)
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

Re: Help with JSON + jQuery + PHP Tutorial

Post by Bbob »

So to use JSON

I have to put the variables from json.php into an array?

Code: Select all

$array = ($hi, $hello, $bye);
How do I translate this so jQuery can read it?


If I only use 1 div, how would I be able to display the variables? I only know how to them in divs
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Help with JSON + jQuery + PHP Tutorial

Post by Eran »

If you have PHP version over 5.2 you can use json_encode()

Code: Select all

$array = ($hi, $hello, $bye);
$json = json_encode($array);
echo $json;
Otherwise, you need to create the JSON string yourself
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

Re: Help with JSON + jQuery + PHP Tutorial

Post by Bbob »

Eran wrote:If you have PHP version over 5.2 you can use json_encode()

Code: Select all

$array = ($hi, $hello, $bye);
$json = json_encode($array);
echo $json;
Otherwise, you need to create the JSON string yourself

Oh...

Could you please direct me to the side where you found "json_encode". I could try Googling it but I think it would be better if I could find your source.
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Help with JSON + jQuery + PHP Tutorial

Post by Eran »

I use the manual :) It's an invaluable resource
http://php.net/manual/en/function.json-encode.php
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

Re: Help with JSON + jQuery + PHP Tutorial

Post by Bbob »

Thanks for the reply :D

How do I "cut" the array?

In this example...

Code: Select all

<?php
$arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

echo json_encode($arr);
?>
Do I use a loop if I try to extract it using jQuery or is there an easier way?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Help with JSON + jQuery + PHP Tutorial

Post by Eran »

Yes, you can use a loop or use the specific array indexes. Replace load() with getJSON() and loop over the response in the callback
http://api.jquery.com/jQuery.getJSON/
Bbob
Forum Commoner
Posts: 57
Joined: Sat Aug 07, 2010 4:46 am

Re: Help with JSON + jQuery + PHP Tutorial

Post by Bbob »

json.php

Code: Select all

$hi = 1 + 3;
$hello = 9 + 4;
$bye = 7+ 6;

$arr($hi, $hello, $bye);
$out = json_encode($arr);

echo $out;
jquery.php

Code: Select all

$(document).ready(function()
{
  $.getJSON('json.php', function(data)
  {
    $('#hi').html(data.hi).show();
    $('#hello').html(data.hello).show();
    $('#bye').html(data.bye).show();
  }
)}

Is this code most likely correct?
User avatar
Eran
DevNet Master
Posts: 3549
Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME

Re: Help with JSON + jQuery + PHP Tutorial

Post by Eran »

Almost - you didn't give the array items indexes, so you can't use those on the json object. Either you give it indexes with the variables names, or you use the numeric indexes on the json object.
Either

Code: Select all

$arr('hi' => $hi, 'hello' => $hello, 'bye' => $bye); //Associative indexes can then be used on the JSON object
Or use the numeric position of the array elements

Code: Select all

$.getJSON('json.php', function(data)
  {
    $('#hi').html(data[0]).show();
    $('#hello').html(data[1]).show();
    $('#bye').html(data[2]).show();
  }
Post Reply