Variabele vullen met AJAX data

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Mark Hogeveen

Mark Hogeveen

05/12/2012 21:27:22
Quote Anchor link
Hallo,

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.
 
PHP hulp

PHP hulp

29/03/2024 13:36:44
 
Kees Schepers

kees Schepers

05/12/2012 21:39:50
Quote Anchor link
Hallo Harry,

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)
PHP script in nieuw venster Selecteer het PHP script
1
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.';
?>
 
Kris Peeters

Kris Peeters

06/12/2012 12:09:39
Quote Anchor link
Eens je de basis onder de knie hebt, van data op te halen ...

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)
PHP script in nieuw venster Selecteer het PHP script
1
2
var a = 'Hello ';
var b = 'World!';


index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
    
    <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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<?php
echo json_encode(
  array(
    'a' => 'Hello ',
    'b' => 'World!'
  )
);

 // zorg vooral dat je niets anders echo't
?>


index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
    <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>
Gewijzigd op 06/12/2012 12:10:40 door Kris Peeters
 
Mark Hogeveen

Mark Hogeveen

07/12/2012 16:13:39
Quote Anchor link
Ik heb nu dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<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
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
<?PHP

echo json_encode(
    array('name' => 'Jan')
);


?>


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?
 
Kris Peeters

Kris Peeters

07/12/2012 16:58:51
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
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
    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);
    }
Gewijzigd op 07/12/2012 17:01:38 door Kris Peeters
 
Mark Hogeveen

Mark Hogeveen

07/12/2012 22:18:02
Quote Anchor link
Jeej het werkt! Bedankt ik heb nu ook weer een beetje geleerd hoe de ajax techniek in javascript werkt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.