web-dev-qa-db-fra.com

Fonction de rappel pour JSONP avec jQuery AJAX

Je ne comprenais pas très bien comment travailler avec le rappel de la fonction ajax de jQuery.

J'ai le code suivant dans le JavaScript:

try {
    $.ajax({
        url: 'http://url.of.my.server/submit?callback=?',
        cache: false,
        type: 'POST',
        data: $("#survey").serialize(),
        dataType: "jsonp",
        timeout: 200,
        crossDomain: true,
        jsonp: 'jsonp_callback',
        success: function (data, status) {
            mySurvey.closePopup();
        },
        error: function (xOptions, textStatus) {
            mySurvey.closePopup();
        }
    });
} catch (err) {
    mySurvey.closePopup();
}

Et côté serveur (AppEngine/Python) j'obtiens la valeur du paramètre de rappel et je réponds avec

self.response.headers['Content-Type'] = 'application/json; charset=utf-8'
self.response.out.write(callback + '({"msg": "ok"});')

Mais je reçois un "Error: jQuery152042227689944248825_1317400799214 is not a function" dans la console du navigateur.

Quelle est la bonne façon de gérer cela? En ce moment, j'obtiens les résultats dont j'ai besoin, mais le fait de savoir que ce n'est pas juste me dérange.

javascriptjqueryajaxjsonp
26
Bani

C'est ce que je fais sur le mien

$(document).ready(function() {
  if ($('#userForm').valid()) {
    var formData = $("#userForm").serializeArray();
    $.ajax({
      url: 'http://www.example.com/user/' + $('#Id').val() + '?callback=?',
      type: "GET",
      data: formData,
      dataType: "jsonp",
      jsonpCallback: "localJsonpCallback"
    });
  });

function localJsonpCallback(json) {
  if (!json.Error) {
    $('#resultForm').submit();
  } else {
    $('#loading').hide();
    $('#userForm').show();
    alert(json.Message);
  }
}
30
atbebtg

supprimer cette ligne:

jsonp: 'jsonp_callback',

Ou remplacez cette ligne:

url: 'http://url.of.my.server/submit?callback=json_callback',

car actuellement vous demandez à jQuery de créer un nom de fonction de rappel aléatoire avec callback=? puis dire à jQuery que vous souhaitez utiliser jsonp_callback au lieu.

13
Joe
$.ajax({
        url: 'http://url.of.my.server/submit',
        dataType: "jsonp",
        jsonp: 'callback',
        jsonpCallback: 'jsonp_callback'
    });

jsonp est le nom du paramètre querystring défini comme acceptable par le serveur pendant que le jsonpCallback est le nom de la fonction javascript à exécuter sur le client.
Lorsque vous utilisez une telle URL:

url: 'http://url.of.my.server/submit?callback=?'

le point d'interrogation? à la fin, demande à jQuery de générer une fonction aléatoire tandis que le comportement prédéfini de la fonction auto-générée ne fera qu'appeler le rappel - la fonction de réussite dans ce cas - en passant les données json comme paramètre.

$.ajax({
        url: 'http://url.of.my.server/submit?callback=?',
        success: function (data, status) {
            mySurvey.closePopup();
        },
        error: function (xOptions, textStatus) {
            mySurvey.closePopup();
        }
    });


Il en va de même ici si vous utilisez $ .getJSON avec? placeholder il générera une fonction aléatoire tandis que le comportement prédéfini de la fonction auto-générée ne fera qu'appeler le rappel:

$.getJSON('http://url.of.my.server/submit?callback=?',function(data){
//process data here
});
9
Abdelfattah Ragab