jQuery JSONP belt de callback niet

Ik heb een probleem met jsonp en jQuery.

Dit is mijn code -

var myCallback = function(data) {
  console.log(data);
};

$.ajax({
  url: my_url,
  type: 'GET',
  dataType: 'jsonp',
  jsonp: 'callback',
  jsonpCallback: 'myCallback'
});

jQuery adds something like ?callback=myCallback&_=1340513330866 to my_url and the data returned from my_url is myCallback('abcd') - although in reality it will be returning some HTML code instead of the abcd.

Probleem: abcd is niet ingelogd via myCallback . Dus wat doe ik fout? Ik had de indruk dat de geretourneerde gegevens worden uitgevoerd omdat deze zich binnen scripttags bevinden?

8
myCallback moet algemeen zijn ... toch?
toegevoegd de auteur Felix Kling, de bron
kun je een voorbeeld van het gewenste antwoord plaatsen
toegevoegd de auteur matt3141, de bron

4 antwoord

Als u uw eigen functie gebruikt, moet u deze expliciet declareren als globaal . Bijvoorbeeld:

window.myCallback = function(data) {
  console.log(data);
};

DEMO


Toelichting

Every function that should be called in response to a successful JSONP request must be global. jQuery is doing this as well. This is because JSONP is nothing else than including a (dynamically generated (most of the time)) JavaScript file with a <script> tag, which only contains a function call. Since each script is evaluated in global scope, the function that is called must be global as well.

16
toegevoegd
@Felix - Bedankt, het voorbeeld dat je hebt gegeven heeft me veel geholpen. +10;
toegevoegd de auteur Aviator, de bron
het werkt, bedankt!
toegevoegd de auteur shaosh, de bron
je hebt mijn tijd bespaard. bedankt
toegevoegd de auteur jasper, de bron

1) verplaats het enkele citaat uit de aangeroepen methode (zoals Umesh Aawte schreef)

2) maak de callback wereldwijd

3) uw callback is een onderdeel van jQuery nu, dus dit is uw manier om uw gegevens te krijgen

Hierna de oplossing: (met jQuery: v3.3.1, node: v6.10.0, express: v4.16.3

window.myCallback = function() {
  console.log(this.data);
}

$.ajax({
  url: my_url,
  type: 'GET',
  dataType: 'jsonp',
  jsonp: 'myCallback',
  jsonpCallback: myCallback
});

dat is alles Mensen!

1
toegevoegd

Verwijder een enkel citaat uit de aangeroepen methode dit zal werken. Controleer de code hier,

var myCallback = function(data) {
      console.log(data);
    };

$.ajax({
  url: my_url,
  type: 'GET',
  dataType: 'jsonp',
  jsonp: 'callback',
  jsonpCallback: myCallback
});

Try this fiddle

0
toegevoegd
Dat zal niet werken. Uit de documentatie: "Vanaf jQuery 1.5 kunt u ook een functie voor deze instelling gebruiken. In dat geval wordt de waarde van jsonpCallback ingesteld op de geretourneerde waarde van die functie ." . Je viool is niet goed ingesteld, dus ik vraag me af wat hij moet laten zien.
toegevoegd de auteur Felix Kling, de bron
Zoals ik al zei, ik weet niet wat je demo moet laten zien. Het toont alleen een waarschuwing met undefined ... die niets bewijst. Je hebt niet eens de JSONP-URL voor de viool gebruikt. Als je de ontwikkelaarstools bekijkt (tabblad Netwerk, uitgaande van Chrome), zul je zien dat er helemaal geen aanvraag wordt gedaan ... de Ajax-oproep vindt niet plaats. Voor de duidelijkheid: Te alert wordt weergegeven omdat jQuery de functie aanroept die u aan jsonpCallback toewijst om de callback-naam te krijgen , precies zoals de documentatie zegt. Het wordt niet genoemd als reactie op een succesvolle Ajax-oproep.
toegevoegd de auteur Felix Kling, de bron
Maar toen ik probeerde dat het aan het sample werkte, heb ik ook een werkende viool toegevoegd. Je kunt de viool die ik heb toegevoegd controleren
toegevoegd de auteur Umesh Aawte, de bron

Waarom niet gewoon:

$.getJSON(my_url, myCallback);

dit zal functie scoping aankunnen en ziet er veel eenvoudiger uit

0
toegevoegd
Dit werkt niet met Jsonp
toegevoegd de auteur Sean Haddy, de bron