Ajax werkt niet icm json
Ik probeer al een tijdje ajax te laten werken in combinatie met json_encode. Ik heb inmiddels al alles geprobeerd maar heb nu een voorbeeld dat volgens mij wel zou moeten werken. Als ik het zonder json doe werkt het wel, heeft iemand een idee hoe dit zou kunnen komen?
Hier de code van het voorbeeld:
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
$array = array('test' => '<p>hier een teststring</p>');
header('Content-type: application/json');
echo json_encode($array);
//echo 'hier een test string'; dit werkt wel
exit();
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.menu').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
dataType:"json",
url:"http://localhost/cms/ajax.php",
success: function(data){
var json = $.parseJSON(data);
alert(data.test);
},
error: function(data){
var json = $.parseJSON(data);
alert(json.error);
},
});
});
});
</script>
</head>
<body>
<a href="test" class="menu">Paginabeheer</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest') {
$array = array('test' => '<p>hier een teststring</p>');
header('Content-type: application/json');
echo json_encode($array);
//echo 'hier een test string'; dit werkt wel
exit();
}
?>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$('.menu').click(function(e){
e.preventDefault();
$.ajax({
type: "GET",
dataType:"json",
url:"http://localhost/cms/ajax.php",
success: function(data){
var json = $.parseJSON(data);
alert(data.test);
},
error: function(data){
var json = $.parseJSON(data);
alert(json.error);
},
});
});
});
</script>
</head>
<body>
<a href="test" class="menu">Paginabeheer</a>
</body>
</html>
Alvast bedankt!
Als je json wilt versturen mag je ALEEN EN DAN OOK ECHT ALLEEN json versturen. Geen html, geen xml, geen strings, NIETS anders.
(alleen de juiste headers van te voren natuurlijk wel)
Ik weet even niet wanneer die voorwaarde precies voldoet, maar het lijkt me verder toch wel goed?
Ik heb hier ook aan zitten denken, maar ik had eerst php en html gescheiden dat werkte ook niet. Als ik het zo
doe zou het dan wel moeten werken(het werkt niet...):
Code (php)
En dan hieronder de rest, normaal gesproken staat de php code natuurlijk in een apart bestand.
Ik heb verder so'n beetje alles geprobeerd/getest wat ik kon bedenken......
Of je toont de echte file niet, of ik kijk verkeerd, maar ik zie boven de echo toch echt dit staan:
Code (php)
1
2
3
4
5
2
3
4
5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
Dit is HTML en dat gaat echt niet samen met de json die je probeert te versturen.
Ik ga zo even testen op een online testsite.
Toevoeging op 23/02/2013 18:39:25:
Werkt online ook niet, doe kennelijk toch iets niet goed...
print_r($array);
is valid.
Toevoeging op 23/02/2013 18:57:48:
{"test":"hier een test"}
Overigens nog een heel klein vraagje(als het geen simpel antwoord is zal ik een nieuw topic starten):
Ik had me router klasse aangepast met ingestelde paden zodat ik met nette urls kan werken maar moet nu het hele pad gebruiken zoals www.test.nl/pagina1. Als ik als link doe /pagina1 komt er elke keer wat meer achter /test/pagina2/pagina3 etc. Hoe los je dit op?
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
type: "GET",
dataType:"json",
url:"http://localhost/cms/ajax.php",
success: function(data){
var json = $.parseJSON(data);
alert(data.test);
},
dataType:"json",
url:"http://localhost/cms/ajax.php",
success: function(data){
var json = $.parseJSON(data);
alert(data.test);
},
Je geeft als datatype json op en gaat daarna parsen van json naar een javascript object. Dat is echter dubbelop. De ajax functie doet dat al voor je. Haal die regel met parseJSON weg en het werkt.
@aar
ik zal morgen even een nieuw topic aanmaken
Bedankt allemaal!