TypeError: $ .ajax (...) non è una funzione?

Sto cercando di creare una semplice richiesta AJAX che restituisce alcuni dati da un database MySQL. Ecco la mia funzione di seguito:

function AJAXrequest(url, postedData, callback) {
    $.ajax() ({
        type: 'POST',
        url: url,
        data: postedData,
        dataType: 'json',
        success: callback
    });
}

... ed ecco dove lo chiamo, analizzando i parametri richiesti:

AJAXrequest('voting.ajax.php', imageData, function(data) {
    console.log("success!");
});

Tuttavia, il mio callback di successo non viene eseguito (poiché "successo!" Non è registrato sulla console) e viene visualizzato un errore nella mia console:

TypeError: $.ajax(...) is not a function.
success: callback

Cosa significa questo? Ho già fatto richieste AJAX prima in cui l'evento di successo innesca una funzione anonima all'interno di $ .ajax, ma ora sto cercando di eseguire una funzione denominata separata (in questo caso, una richiamata). Come posso procedere?

Nessuna delle risposte qui mi ha aiutato. Il problema era: stavo usando la build sottile di jQuery , che aveva rimosso alcune cose, ajax essendo una di queste.

La soluzione: Basta scaricare la versione normale (compresso o meno) di jQuery qui e includerlo nel progetto.

Ricontrolla se stai utilizzando la versione completa di jquery e non una versione sottile.

Stavo usando il link jnery cdn-script fornito con jquery. Il problema è che questo è di default slim.jquery.js che non ha la ajaxfunzione al suo interno. Quindi, se stai usando (copia-incolla dal sito Web Bootstrap) il link dello script jquery versione slim, usa invece la versione completa.

Vale a dire usare <script src="https://code.jquery.com/jquery-3.1.1.min.js"> invece di <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"

Non sono sicuro, ma sembra che tu abbia un errore di sintassi nel tuo codice. Provare:

$.ajax({
  type: 'POST',
  url: url,
  data: postedData,
  dataType: 'json',
  success: callback
});

Accanto c'erano parentesi extra $.ajaxche non erano necessarie. Se l'errore persiste, il file di script jQuery non viene caricato.

Acquista la documentazione di Jquery

Avviso di deprecazione: i callback jqXHR.success (), jqXHR.error () e jqXHR.complete () vengono rimossi da jQuery 3.0. È invece possibile utilizzare jqXHR.done (), jqXHR.fail () e jqXHR.always ().

Hai un errore nella tua funzione AJAX, troppe parentesi, prova invece $.ajax({

Fai riferimento alla versione minima di jquery che include ajax:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Si è verificato un errore di sintassi dopo aver inserito la parentesi dopo la funzione ajax e un'altra serie di parentesi per definire l'elenco degli argomenti: -

Come hai scritto: -

$.ajax() ({
    type: 'POST',
    url: url,
    data: postedData,
    dataType: 'json',
    success: callback
});

La parentesi attorno a Ajax deve essere rimossa dovrebbe essere: -

$.ajax({
    type: 'POST',
    url: url,
    data: postedData,
    dataType: 'json',
    success: callback
});

Ho riscontrato la stessa domanda e la mia soluzione era: aggiungere lo script JQuery.

In particolare, dovremmo assicurarci che il JQuery corrispondente sia caricato quando eseguiamo il debug dei nostri js sotto firefox / chrome.

Se stai utilizzando il modello html bootstrap, ricorda di rimuovere il collegamento a jquery slim nella parte inferiore del modello. Pubblico questo dettaglio qui perché non posso ancora commentare le risposte ..

Per chiunque cerchi di eseguirlo in nodejs : non funzionerà immediatamente , poiché jquery ha bisogno di un browser (o simile)! Stavo solo cercando di far funzionare l'importazione e stavo registrando quello console.log($)che ha scritto [Function]e poi anche quello console.log($.ajax)che è tornato undefined. Non ho avuto tscerrori e ho completato automaticamente da Intellij, quindi mi chiedevo cosa stesse succedendo.

Poi ad un certo punto mi sono reso conto che nodepotrebbe essere il problema e non il dattiloscritto. Ho provato lo stesso codice nel browser e ha funzionato. Per farlo funzionare devi eseguire:

require("jsdom").env("", function(err, window) {
    if (err) {
        console.error(err);
        return;
    }

    var $ = require("jquery")(window);
});

(crediti: https://stackoverflow.com/a/4129032/3022127 )

È troppo tardi per una risposta, ma questa risposta può essere utile per i futuri lettori.

Vorrei condividere uno scenario in cui, diciamo, ci sono più file HTML ( un HTML di base e più sub-HTML ) e $ .ajax viene utilizzato in uno dei sub-HTML.

Supponiamo che nel sub-HTML, js sia incluso tramite l'URL " https://code.jquery.com/jquery-3.5.0.js " e nell'HTML di base / padre, tramite URL - " https: //code.jquery .com / jquery-3.1.1.slim.min.js ", la versione slim di JS verrà utilizzata in tutte le pagine che utilizzano questo sub-HTML e l'HTML di base sopra menzionato.

Questo è particolarmente vero nel caso in cui si usi il framework bootstrap che carica js usando " https://code.jquery.com/jquery-3.1.1.slim.min.js ".

Quindi, per risolvere il problema, è necessario assicurarsi che in tutte le pagine, js sia incluso tramite l'URL " https://code.jquery.com/jquery-3.5.0.js " o qualunque sia l'URL più recente contenente tutte le librerie JQuery.

Grazie a Lily H. per avermi indicato questa risposta.

lasciami condividere la mia esperienza:

il mio designer di pagine HTML usa:

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

quando creo una semplice richiesta AJAX, ricevendo un errore che dice, TypeError: $ .ajax (...) non è una funzione

Quindi, aggiungo:

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

quindi, funziona perfettamente almeno per me.