json array ontvangen in Javascript
ik ben bekend met programmeren in Java, maar Javascript/PHP is nog aardig nieuw voor me. Ik heb op dit moment een aantal entries gemaakt in een mysql database en wil deze info doorsturen naar javascript, waar ik een Jquery slider heb.
Nu heb ik begrepen dat je de data eerst moet coderen:
$res = json_encode($row);
als ik " echo json_encode($row);" doe zie ik:
Code (php)
1
{"date":"2010-12-07 04:23:19"}{"date":"2010-12-07 04:47:33"}{"date":"2010-12-07 03:34:18"}
Hoe kan ik de informatie terughalen in Javascript? ik heb een hoop gelezen over json2, , maar het wordt me niet echt duidelijk.
uiteindelijk wil ik de waardes hierin voeren:
// Slider
$('#slider').slider({
range: true,
values: [Waarde van json array]
});
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<?php
echo '<html>
<head>
<script>
var mijn_variabele = eval('. json_encode($row) .');
</script>
</head>
</html>';
?>
echo '<html>
<head>
<script>
var mijn_variabele = eval('. json_encode($row) .');
</script>
</head>
</html>';
?>
Met Ajax met jQuery:
Gewoon het dataType op json zetten, dan is eval() niet nodig.
bv.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
...
$.ajax({
type: "GET",
url: "pagina_waar_mijn_json_string_wordt_gegenereerd.php",
dataType: "json",
success: mijn_respons
});
...
function mijn_respons (data) {
// hier wordt data herkend als een object, niet als een string
}
$.ajax({
type: "GET",
url: "pagina_waar_mijn_json_string_wordt_gegenereerd.php",
dataType: "json",
success: mijn_respons
});
...
function mijn_respons (data) {
// hier wordt data herkend als een object, niet als een string
}
mysql-query.php:
Quote:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<?php
$province = $_POST['test'];
$dbhost = 'localhost';
$dbname = 'news';
$dblogin = 'root';
$dbpass = '';
function dbConnect() {
global $dbhost;
global $dbname;
global $dblogin;
global $dbpw;
$db = mysql_connect($dbhost, $dblogin, $dbpw) or die("could not
connect to database: ".mysql_error());
mysql_select_db($dbname) or die("could not select database");
return $db;
}
function dbClose($db) {
mysql_close($db);
}
// basis code ^^
$db = dbConnect();
$query = "SELECT title,description FROM news_BBC_sport";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo json_encode($row);
}
?>
$province = $_POST['test'];
$dbhost = 'localhost';
$dbname = 'news';
$dblogin = 'root';
$dbpass = '';
function dbConnect() {
global $dbhost;
global $dbname;
global $dblogin;
global $dbpw;
$db = mysql_connect($dbhost, $dblogin, $dbpw) or die("could not
connect to database: ".mysql_error());
mysql_select_db($dbname) or die("could not select database");
return $db;
}
function dbClose($db) {
mysql_close($db);
}
// basis code ^^
$db = dbConnect();
$query = "SELECT title,description FROM news_BBC_sport";
$result = mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($result,MYSQL_ASSOC))
{
echo json_encode($row);
}
?>
en dan het te ontvangen met dit:
Quote:
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="jquery.highlight-3.js"></script>
<script type="text/javascript">
$.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown);
alert(XMLHttpRequest.responseText);
}});
$.getJSON("http://localhost/webdesign/jquery/mysql-query.php",
function(data) {
console.log(data);
});
</script>
</html>
</head>
<html>
<head>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.6.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.sparkline.min.js"></script>
<script type="text/javascript" src="jquery.highlight-3.js"></script>
<script type="text/javascript">
$.ajaxSetup({"error":function(XMLHttpRequest,textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown);
alert(XMLHttpRequest.responseText);
}});
$.getJSON("http://localhost/webdesign/jquery/mysql-query.php",
function(data) {
console.log(data);
});
</script>
</html>
</head>
ik krijg dan via firebug een parse error, hij laat de json informatie wel zien, maar hij kan het niet verwerken.
Gewijzigd op 13/12/2010 18:17:48 door Kees Bokhoven