TypeError: $ .ajax (…) nie jest funkcją?

231

Próbuję utworzyć proste żądanie AJAX, które zwraca niektóre dane z bazy danych MySQL. Oto moja funkcja poniżej:

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

... i tutaj go nazywam, analizując wymagane parametry:

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

Jednak moje wywołanie zwrotne sukcesu nie działa (ponieważ „sukces!” Nie jest zalogowany do konsoli), aw konsoli pojawia się błąd:

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

Co to znaczy? Wcześniej wykonywałem żądania AJAX, gdy zdarzenie pomyślne wyzwala anonimową funkcję w $ .ajax, ale teraz próbuję uruchomić osobną funkcję nazwaną (w tym przypadku wywołanie zwrotne). Jak mam to zrobić?

ReactingToAngularVues
źródło
2
czy uwzględniono jquery
Arun P. Johny
2
zmień to $ .ajax () ({na $ .ajax ({
Prabhu Murthy
3
Nazwałeś $.ajaxbez argumentów ( $.ajax()) i wartość zwracana jest obiektem jqXHR, która nie jest funkcją. Dlatego $.ajax()(...)wyrzuci błąd.
Felix Kling
2
albo pominąłeś dołączenie jquery.js LUB podłączyłeś jquery.js poniżej wywołania funkcji LUB spróbuj wypróbować jQuery.ajax (zamień $ na jQuery).
Pranay Bhardwaj
90
W moim przypadku jest tak dlatego, że użyłem wąskiej, zminimalizowanej wersji JQuery, która pobiera funkcję ajax
TomNg,

Odpowiedzi:

952

Żadna z odpowiedzi tutaj nie pomogła mi. Problem polegał na tym, że używałem cienkiej wersji jQuery , która usunęła pewne rzeczy, a jedną z nich jest ajax.

Rozwiązanie: Wystarczy pobrać regularne (skompresowany lub nie) wersję jQuery tutaj i umieścić go w swoim projekcie.

Gus
źródło
56
To naprawiło mój problem! Co do cholery jQuery ?? Dlaczego jest $.ajaxusuwany z „cienkiej” wersji?
samnau
57
Smukła budowa pochłonęła kolejną ofiarę.
Drew Kennedy,
49
Skopiowałem kod z Bootstrap. Używają wersji slim. Może ty też
Cyril N.
126

Sprawdź dwukrotnie, czy używasz pełnej wersji jquery, a nie jakiejś smukłej wersji.

Korzystałem z linku do skryptu cdn-jquery, który jest dołączony do jquery. Problem polega na tym, że domyślnie jest to slim.jquery.js, który nie ma w sobie tej ajaxfunkcji. Jeśli więc używasz (sklejonego ze strony Bootstrap) skróconego linku do skryptu jquery, użyj pełnej wersji.

To znaczy użyj <script src="https://code.jquery.com/jquery-3.1.1.min.js"> zamiast <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"

karthiks
źródło
27

Nie jestem pewien, ale wygląda na to, że masz błąd składniowy w kodzie. Próbować:

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

Miałeś dodatkowe nawiasy, $.ajaxktóre nie były potrzebne. Jeśli nadal pojawia się błąd, plik skryptu jQuery nie jest ładowany.

Jason Evans
źródło
2
To nie jest błąd składniowy. Oczekiwano, że zwracana wartość będzie funkcją, która nie jest.
Felix Kling
Ach, rozumiem. Tak naprawdę, ten problem to tak naprawdę brakujące odniesienie do pliku skryptu jQuery.
Jason Evans,
3
Nie. Spójrz na to jak $.ajax()();. To jest poprawny JavaScript. Oznacza „zadzwoń $.ajaxi cokolwiek zwróci, zadzwoń również”. Ale $.ajaxnie zwraca funkcji (którą można wywołać), zwraca jqXHRobiekt, więc zgłasza błąd. Twoja odpowiedź jest prawidłowa, dodatkowe ()stanowią problem, ale opis problemu jest nieprawidłowy (nie jest to błąd składniowy, a przynajmniej nie dla parsera).
Felix Kling
Nie, przepraszam, o tym mówiłem w poprzednim komentarzu; że nie jest to problem błędu składniowego, ponieważ składnia jest poprawna, ale raczej problem z plikiem skryptu jQuery, który nie został załadowany w momencie użycia $ .ajax ().
Jason Evans,
2
Nie, nie brakuje pliku jquery.js (gdyby to był błąd, dotyczyłby $), ale nie jest to również błąd składniowy, ponieważ jest to prawidłowy JS. Po prostu nie jest to odpowiednia składnia dla pożądanego zachowania, więc powoduje błąd w czasie wykonywania, jak wyjaśnił Felix.
nnnnnn
9

Kasa Dokumentacja Jquery

Uwaga dotycząca wycofania: wywołania zwrotne jqXHR.success (), jqXHR.error () i jqXHR.complete () są usuwane od wersji jQuery 3.0. Zamiast tego możesz użyć jqXHR.done (), jqXHR.fail () i jqXHR.always ().

Mahbub
źródło
3
To nie ma znaczenia dla kwestii wcale, żadna z tych metod są nieaktualne w użytku z tym pytaniem ..
Kevin B
3

Wystąpił błąd w funkcji AJAX, za dużo nawiasów, spróbuj zamiast tego $.ajax({

netvision73
źródło
3

Odwołaj się do min wersji jquery, która obejmuje ajax:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Daniel Mendoza
źródło
2

Wystąpił błąd składniowy, ponieważ wstawiono nawias po funkcji ajax i inny zestaw nawiasów, aby zdefiniować listę argumentów: -

Jak napisałeś:

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

Nawias wokół ajax musi zostać usunięty powinien być: -

$.ajax({
    type: 'POST',
    url: url,
    data: postedData,
    dataType: 'json',
    success: callback
});
abhinsit
źródło
1

Napotkałem to samo pytanie, a moim rozwiązaniem było: dodaj skrypt JQuery.

Szczególnie powinniśmy upewnić się, że odpowiednie JQuery jest załadowane, gdy debugujemy nasze pliki js pod firefox / chrome.

Jianeng Xu
źródło
1

Jeśli używasz szablonu HTML Bootstrap, pamiętaj o usunięciu łącza do JQuery Slim na dole szablonu. Publikuję ten szczegół tutaj, ponieważ nie mogę jeszcze komentować odpowiedzi ..

Lily H.
źródło
0

Dla każdego, kto próbuje uruchomić to w nodejs : To nie będzie działać po wyjęciu z pudełka, ponieważ jquery potrzebuje przeglądarki (lub podobnej)! Właśnie próbowałem uruchomić import i logowałem, console.log($)który napisał, [Function]a następnie console.log($.ajax)który zwrócił undefined. Nie miałem tscbłędów i miałem autouzupełnianie od intellij, więc zastanawiałem się, co się dzieje.

W pewnym momencie zdałem sobie sprawę, że to nodemoże być problem, a nie maszynopis. Próbowałem tego samego kodu w przeglądarce i działało. Aby działało, musisz uruchomić:

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

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

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

bersling
źródło
-1

Na odpowiedź jest już za późno, ale odpowiedź ta może być pomocna dla przyszłych czytelników.

Chciałbym podzielić się scenariuszem, w którym powiedzmy, że istnieje wiele plików HTML ( jeden podstawowy HTML i wiele pod HTML ), a $ .ajax jest używany w jednym z pod HTML.

Załóżmy, że w sub-HTML, js jest zawarty poprzez URL „ https://code.jquery.com/jquery-3.5.0.js ” oraz w podstawowym / nadrzędnym HTML, poprzez URL - „ https: //code.jquery .com / jquery-3.1.1.slim.min.js ”, wówczas na wszystkich stronach, które używają tego sub-HTML, a także podstawowego HTML wspomnianego powyżej, będzie używana smukła wersja JS.

Jest to szczególnie prawdziwe w przypadku korzystania z frameworka bootstrap, który ładuje js przy użyciu „ https://code.jquery.com/jquery-3.1.1.slim.min.js ”.

Aby rozwiązać problem, należy upewnić się, że na wszystkich stronach plik js jest zawarty za pośrednictwem adresu URL „ https://code.jquery.com/jquery-3.5.0.js ” lub dowolnego innego najnowszego adresu URL zawierającego wszystkie biblioteki JQuery.

Dzięki Lily H. za skierowanie mnie do tej odpowiedzi.

AwsAnurag
źródło
-2

Pozwól, że podzielę się swoim doświadczeniem:

mój projektant stron HTML:

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

kiedy tworzę proste żądanie AJAX, pojawia się komunikat o błędzie: TypeError: $ .ajax (…) nie jest funkcją

Dodam więc:

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

to przynajmniej działa dla mnie idealnie.

Sriparna Ghosh
źródło
Nie. Ładowanie jQuery slim, a następnie natychmiastowe zastąpienie go jQuery jest całkowicie bezcelowe i marnuje przepustowość.
Quentin