[JS] Prototype en JSON probleem

[Koeniepoenie]

Beste mensen,

Ik ben met prototype een klein stukje AJAX aan het implementeren. Nadat de user middels een link de functie triggert is het de bedoeling dat er een pagina aangeroepen wordt waarbij PHP een stukje JSON teruggeeft waar vervolgens weer wat mee gedaan word in JS.

Ikzelf ben redelijk nieuw met JSON en prototype maar verder niet met JS an sich. Ik gebruik gewoon dit stukje code voor de AJAX aanroep:

JavaScript:

new Ajax.Request('/loadProducts/'+id, { method:'get',
    onSuccess: function(transport, json){
        alert(json ? Object.inspect(json) : "no JSON object");
        alert('Json: \n'+json);
    }
});

Ik heb de URL hier wat ingekort maar deze klopt iig wel. Ik krijg nu constant de melding dat het 'no JSON object' is en de volgende alert geeft steeds 'null'.

PHP geeft dit stukje JSON terug:

JSON:

[{"id":1, "product": "Test 1"}]

Wat er uiteraard meer kunnen zijn.

Ik las dus dat je wel een x-json header moest meesturen om prototype het te laten herkennen. Dus ik dit toegevoegd aan mijn PHP stukje:

PHP:

header('Content-type: text/x-json');

En ik heb ook 'text/javascript' geprobeerd omdat ik dit ergens via Google vond, maar beide hebben geen effect.

Ik heb dit geprobeerd en dat werkt prima:

JavaScript:

d = '[{"id":1, "product": "Test 1"}]'.evalJSON();
alert('ID: '+d[0].id+'\nProduct: '+d[0].product);

Iemand enig idee waar het hier aan ligt?

[Bosmonster]

Waarom vraag je de JSON string niet gewoon op met transport.responseText? Ik snap dat tweede argument niet dat je gebruikt.

code:

... 
  onSuccess: function (transport) { 
      var json = transport.responseText.evalJSON();
  }
...

Ah zie nu dat dat een directe manier is om JSON te parsen in de handleiding Voorwaarde is wel dat je inderdaad een text/javascript content-type meestuurt of een x-jason header.

Magoed, volgens mij werkt bovenstaande net zo simpel

[ Voor 51% gewijzigd door Bosmonster op 15-05-2008 23:47 ]

[Koeniepoenie]

Ja dat zou goed kunnen. Alleen wanneer ik de prototype website doorlees lees ik dit:

quote: http://www.prototypejs.org/learn/introduction-to-ajax

Evaluating a JavaScript response

Sometimes the application is designed to send JavaScript code as a response. If the content type of the response matches the MIME type of JavaScript then this is true and Prototype will automatically eval() returned code. You don't need to handle the response explicitly if you don't need to.

Alternatively, if the response holds a X-JSON header, its content will be parsed, saved as an object and sent to the callbacks as the second argument:

code:

new Ajax.Request('/some_url', { method:'get',
  onSuccess: function(transport, json){
      alert(json ? Object.inspect(json) : "no JSON object");
    }
  });

Use this functionality when you want to fetch non-trivial data with Ajax but want to avoid the overhead of parsing XML responses. JSON is much faster (and lighter) than XML.

Dit lijkt mij dus een mooi ingebakken methode, die dus niet werkt (bij mij).

Mocht ik er niet uitkomen kan ik altijd nog bovenstaande oplossing gebruiken.

edit:
Ah ik zie dat je het zelf ook gevonden hebt

[ Voor 3% gewijzigd door Koeniepoenie op 15-05-2008 23:55 ]

[Verwijderd]

Bosmonster schreef op donderdag 15 mei 2008 @ 23:42:
Waarom vraag je de JSON string niet gewoon op met transport.responseText? Ik snap dat tweede argument niet dat je gebruikt.

code:

... 
  onSuccess: function (transport) { 
      var json = transport.responseText.evalJSON();
  }
...

Ah zie nu dat dat een directe manier is om JSON te parsen in de handleiding Voorwaarde is wel dat je inderdaad een text/javascript content-type meestuurt of een x-jason header.

Magoed, volgens mij werkt bovenstaande net zo simpel

Sinds 1.6 werkt dit ook:

code:

... 
  onSuccess: function (transport) { 
      var json = transport.responseJSON;
  }
...

Over simpel gesproken

[Koeniepoenie]

Hm,

Ik heb ook nog even de application/json header geprobeerd mee te sturen, maar dit ter vergeefs. Ik houd nu deze oplossing aan:

JavaScript:

onSuccess: function (transport) { 
    var json = transport.responseText.evalJSON(true);
}