Variabele vullen met AJAX data
Ik wil met Javascript d.m.v. een AJAX request een aantal variabelen vullen in mijn javascript.
Dus ik doe een AJAX request en dan moeten op een bepaalde manier variabelen worden gevuld met data die van de pagina af komt waar ik de request naartoe stuurde.
Als ik bijvoorbeeld 3 variabelen moet vullen, met elk een apart woord erin.
Moet ik dan gewoon op de pagina, waar ik de data vanaf haal, 3 divs maken en dan met javascript kijken wat er in de divs staat? Zo gebruik je de divs als een soort geordende opslag.
In hoeverre heb je verdiept in hoe AJAX werkt? Heb je al iets in elkaar proberen te knutselen en zoja laat het ons eens zien.
Een voorbeeldje met jquery zou zijn
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="tekstdiv">Hier moet tekst komen</div>
<script src="url-naar-jquery-lib.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('url-naar-bestand.php', function(data) {
$('#tekstdiv').html(data);
});
});
</script>
<?php
//url-naar-bestand.php
echo 'Hoi.';
?>
<script src="url-naar-jquery-lib.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$.get('url-naar-bestand.php', function(data) {
$('#tekstdiv').html(data);
});
});
</script>
<?php
//url-naar-bestand.php
echo 'Hoi.';
?>
Ik toon je twee manieren om data van de server om te zetten in verschillende variabelen.
Beide doen exact het zelfde.
Best via de tweede manier.
1) met eval (Google eens 'eval is evil' ... niet iedereen houdt zo van eval)
ajax.php
Code (php)
1
2
2
var a = 'Hello ';
var b = 'World!';
var b = 'World!';
index.php
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
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
<input id="button" type="button" value="KLIK">
<div id="message"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('#button').click(function(e) {
$.ajax({
url: 'ajax.php',
success: function(data) {
eval(data); // code van de respons wordt gevalueerd als zijnde javascript code
if (typeof a != 'undefined' && typeof b != 'undefined') {
$('#message').html(
'var a + var b = ' + a + b + '<br>'
);
}
else {
$('#message').html('Er is iets fout gelopen');
}
}
});
});
});
</script>
--------------------------------------------------
2) met json
Je maakt in php een object of array. Met json_encode($string) wordt dat object omgezet in een string. Een string die javascript probleemloos kan lezen.
ajax.php
Code (php)
index.php
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
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
<input id="button" type="button" value="KLIK">
<div id="message"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('#button').click(function(e) {
$.ajax({
url: 'ajax.php',
dataType: 'json',
success: function(data) {
var a = data.a,
b = data.b;
if (typeof a != 'undefined' && typeof b != 'undefined') {
$('#message').html(
'var a + var b = ' + a + b + '<br>'
);
}
else {
$('#message').html('Er is iets fout gelopen');
}
}
});
});
});
</script>
<div id="message"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('#button').click(function(e) {
$.ajax({
url: 'ajax.php',
dataType: 'json',
success: function(data) {
var a = data.a,
b = data.b;
if (typeof a != 'undefined' && typeof b != 'undefined') {
$('#message').html(
'var a + var b = ' + a + b + '<br>'
);
}
else {
$('#message').html('Er is iets fout gelopen');
}
}
});
});
});
</script>
Gewijzigd op 06/12/2012 12:10:40 door Kris Peeters
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
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
<html>
<head>
<script>
function init() {
var url = '/werk/gegevens.php';
var JSONObject;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function ()
{
if ( http_request.readyState == 4 )
{
if ( http_request.status == 200 )
{
JSONObject = eval( "(" + http_request.responseText + ")" );
alert( "Hello " + JSONObject.name + "!" );
}
else
{
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
}
</script>
</head>
<body>
<a href="javascript:init()">Klik</a>
</body>
</html>
<head>
<script>
function init() {
var url = '/werk/gegevens.php';
var JSONObject;
var http_request = new XMLHttpRequest();
http_request.open( "GET", url, true );
http_request.onreadystatechange = function ()
{
if ( http_request.readyState == 4 )
{
if ( http_request.status == 200 )
{
JSONObject = eval( "(" + http_request.responseText + ")" );
alert( "Hello " + JSONObject.name + "!" );
}
else
{
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
}
</script>
</head>
<body>
<a href="javascript:init()">Klik</a>
</body>
</html>
En het PHP scriptje
Ik heb dit stukje javascript op internet gevonden, en het bevat geen jQuery (ik wil het graag zonder jQuery proberen)
Maar er gebeurt niks als ik op de link klik.
Ook geen alert met "There was a problem with the url"
Ook is er nog iets anders: als ik de hele url naar een pagina in de variabele url zet (met http://www) dan gebeurt er niks, en zie ik bij de javascript errors van mijn browser dat de toegang is geweigerd.
Als ik gewoon de map en het bestand in de variabele url zet, zie ik geen javascript error in mijn browser.
Wat is er niet goed aan deze codes?
Harry hogeveen op 07/12/2012 16:13:39:
... ik wil het graag zonder jQuery proberen ...
Dat mag :)
Geen probleem.
Twee puntjes, aan jouw code.
- extra support voor andere browsers (jaja, ik bedoel IE < versie who_cares)
- Je bent het belangrijkste vergeten: de http_request.send()
(juist de url aanpassen)
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
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
function init() {
var url = 'ajax.php';
var http_request;
if (typeof xmlhttp == 'undefined') {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
http_request=new XMLHttpRequest();
}
else {// code for IE6, IE5
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
JSONObject = eval( "(" + http_request.responseText + ")" );
alert( "Hello " + JSONObject.name + "!" );
}
else {
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
http_request.send(null);
}
var url = 'ajax.php';
var http_request;
if (typeof xmlhttp == 'undefined') {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
http_request=new XMLHttpRequest();
}
else {// code for IE6, IE5
http_request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
http_request.open( "GET", url, true );
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
JSONObject = eval( "(" + http_request.responseText + ")" );
alert( "Hello " + JSONObject.name + "!" );
}
else {
alert( "There was a problem with the URL." );
}
http_request = null;
}
};
http_request.send(null);
}
Gewijzigd op 07/12/2012 17:01:38 door Kris Peeters