JavaScript and client side scripting.
Moderator: General Moderators
Bbob
Forum Commoner
Posts: 57 Joined: Sat Aug 07, 2010 4:46 am
Post
by Bbob » Sun Oct 17, 2010 7:01 am
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
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Sun Oct 17, 2010 7:43 am
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
Post
by Bbob » Sun Oct 17, 2010 9:20 am
So to use JSON
I have to put the variables from json.php into an array?
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
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Sun Oct 17, 2010 11:33 am
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
Post
by Bbob » Mon Oct 18, 2010 7:50 am
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.
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Mon Oct 18, 2010 8:27 am
Bbob
Forum Commoner
Posts: 57 Joined: Sat Aug 07, 2010 4:46 am
Post
by Bbob » Tue Oct 19, 2010 6:22 am
Thanks for the reply
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?
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Tue Oct 19, 2010 6:37 am
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
Post
by Bbob » Wed Oct 20, 2010 5:39 am
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?
Eran
DevNet Master
Posts: 3549 Joined: Fri Jan 18, 2008 12:36 am
Location: Israel, ME
Post
by Eran » Wed Oct 20, 2010 6:37 am
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();
}