web-dev-qa-db-fra.com

TypeError non capturé: $ .ajax (...). Le succès n'est pas une fonction

Je suis nouveau sur jQuery et j'utilise un vieux tutoriel sur node.js Qui utilise cet extrait:

$(function () {    
    var roomId;

    $.ajax({
        type: "GET",
        url: "/api/rooms"
    }).success(function (rooms) { 
        roomId = rooms[0].id;
        getMessages();
        $.each(rooms, function (key, room) {
            var a = '<a href="#" data-room-id="' + room.id + '" class="room list-group-item">' + room.name + '</a>';
            $("#rooms").append(a);
        });

    });

    [...]       

});

Cependant je reçois cette erreur

TypeError non capturé: $ .ajax (...). Le succès n'est pas une fonction

à }).success(function (rooms) {

Je me demande ce qui peut se tromper ici?

javascriptjqueryajax
31
Karlom

L'appel à ajax devrait ressembler à ceci:

$.ajax({
    type: "GET",
    url: "/api/rooms",
    success: function (rooms) { 

    }
});

Vous ne chaînez pas la fonction de succès avec la méthode, c'est l'une des entrées de l'argument du dictionnaire.

41
JCollerton

Votre code est correct il n'y a pas de problème

mais vous pourriez inclure la nouvelle bibliothèque jquery qui n'autorise pas la méthode .success ()

pour les nouvelles versions de jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
    $.ajax({
        type: "GET",
        url: "/api/rooms",
        success: function (rooms) {

        }
    });
</script>

et si vous utilisez ancien jquery, la méthode .success () s’exécutera sans problème

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>
    $.ajax({

        url: "/api/rooms",
        method: "GET",
        data: {'datavar': datavalue}

    }).success(function (rooms) {

        console.log("successfully run ajax request..." + rooms);

    }).done(function () {

        console.log("I am from done function");

    }).fail(function () {

        console.log("I am from fail function.");

    }).always(function () {

        console.log("I am from always function");

    });
</script>
24
Shailesh Sonare

Selon la documentation

Les méthodes de rappel jqXHR.success(), jqXHR.error() et jqXHR.complete() sont supprimées à partir de jQuery 3.0.

Vous pouvez utiliser jqXHR.done(), jqXHR.fail() et jqXHR.always() à la place.

Ces méthodes ont été ajoutées à l'origine aux rappels d'options $.ajax De jQuery, pour être utilisées comme ceci

$.ajax({
    url      : 'mypage.php',
    success  : function() { ... },
    error    : function() { ... },
    complete : function() { ... }
});

Cependant, en raison d'une certaine confusion parmi les utilisateurs, ils ont été accompagnés par la suite de méthodes chaînables du même nom.

$.ajax().success(  function() { ... })
        .error(    function() { ... })
        .complete( function() { ... })

Ces méthodes sont obsolètes depuis jQuery 1.8 et complètement supprimées dans jQuery 3.0 en raison de l'utilisation d'objets différés et de promesses ultérieures.

Les jqXHR.success(), jqXHR.error() et jqXHR.complete() sont remplacées par le chaînable jqXHR.done(), jqXHR.fail() et jqXHR.always() méthodes, les options callbacks sont encore disponibles pour le moment.

Depuis jQuery 3.0, les objets différés de jQuery sont également compatibles Promise/A + , ce qui signifie qu'ils peuvent être "alors", et peuvent également être utilisés avec then()

$.ajax("/status").then(function(data) {

}).catch(function(error) {

});
9
adeneo