TypeError: $ .ajax (…) não é uma função?

231

Estou tentando criar uma solicitação AJAX simples que retorna alguns dados de um banco de dados MySQL. Aqui está a minha função abaixo:

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

... e é aqui que eu chamo, analisando os parâmetros necessários:

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

No entanto, meu retorno de chamada de sucesso não é executado (como "sucesso!" Não é registrado no console) e recebo um erro no meu console:

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

O que isto significa? Já fiz solicitações AJAX antes de o evento de sucesso disparar uma função anônima dentro de $ .ajax, mas agora estou tentando executar uma função nomeada separada (neste caso, um retorno de chamada). Como faço para fazer isso?

ReactingToAngularVues
fonte
2
se jquery está incluído
Arun P Johny
2
alterar isso $ .ajax () ({para $ .ajax ({
Prabhu Murthy 16/08/13
3
Você chamou $.ajaxsem argumentos ( $.ajax()) e o valor de retorno é um objeto jqXHR, que não é uma função. Portanto $.ajax()(...), lançará um erro.
Felix Kling
2
você esqueceu de incluir o jquery.js OU você incluiu o jquery.js abaixo da chamada de função OU tente o jQuery.ajax (substitua $ pelo jQuery).
Pranay Bhardwaj
90
No meu caso, é porque eu usei magro minified versão do JQuery que leva para fora ajax função
TomNg

Respostas:

952

Nenhuma das respostas aqui me ajudou. O problema era: eu estava usando a versão compacta do jQuery , que tinha algumas coisas removidas, sendo o ajax uma delas.

A solução: basta baixar a versão regular (compactada ou não) do jQuery aqui e incluí-la no seu projeto.

Gus
fonte
56
Foi isso que resolveu o meu problema! Que diabos jQuery ?? Por que é $.ajaxremovido da compilação "slim"?
samnau
57
A construção magra reivindicou outra vítima.
de Drew Kennedy
49
Copiei o código do Bootstrap. Eles usam a versão slim. Talvez você também?
Cyril N.
126

Verifique se você está usando a versão completa do jquery e não uma versão slim.

Eu estava usando o link jquery cdn-script que acompanha o jquery. O problema é que este, por padrão, é slim.jquery.js, que não possui a ajaxfunção. Portanto, se você estiver usando o link de script jquery da versão slim (copiada e colada no site do Bootstrap), use a versão completa.

Ou seja, use em <script src="https://code.jquery.com/jquery-3.1.1.min.js"> vez de <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"

karthiks
fonte
27

Não tenho certeza, mas parece que você tem um erro de sintaxe no seu código. Experimentar:

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

Você tinha colchetes extras ao lado dos $.ajaxquais não eram necessários. Se você ainda receber o erro, o arquivo de script jQuery não será carregado.

Jason Evans
fonte
2
Não é um erro de sintaxe. Esperava-se que o valor de retorno fosse uma função que não é.
Felix Kling
Ahhh entendo. Realmente, esse problema é apenas uma referência de arquivo de script jQuery ausente.
Jason Evans
3
Não. Veja como $.ajax()();. Este é um JavaScript válido. Significa "ligar $.ajaxe o que quer que retorne, ligue também". Mas $.ajaxnão retorna uma função (que poderia ser chamada), retorna um jqXHRobjeto e, portanto, gera um erro. Sua resposta está correta, o adicional ()é o problema, mas a descrição do problema não está correta (não é um erro de sintaxe, pelo menos não para o analisador).
Felix Kling
Não, desculpe, é o que eu estava dizendo no meu comentário anterior; que este não é um problema de erro de sintaxe, já que a sintaxe é válida, mas um problema com o arquivo de script jQuery não carregado no momento em que $ .ajax () é usado.
Jason Evans
2
Não, o jquery.js não está ausente (se o erro fosse sobre o $), mas também não é um erro de sintaxe, pois é JS válido. Não é apenas uma sintaxe apropriada para o comportamento desejado, portanto, causa um erro de tempo de execução, conforme explicado por Felix.
Nnnnnn
9

Caixa A documentação do jQuery

Aviso de descontinuação : Os retornos de chamada jqXHR.success (), jqXHR.error () e jqXHR.complete () são removidos a partir do jQuery 3.0. Você pode usar jqXHR.done (), jqXHR.fail () e jqXHR.always ().

Mahbub
fonte
3
Isso não é relevante para a questão em tudo, nenhum desses métodos obsoletas estão em uso com esta pergunta ..
Kevin B
3

Você tem um erro na sua função AJAX, entre parênteses demais, tente $.ajax({

netvision73
fonte
3

Consulte a versão min do jquery que inclui o ajax:

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

Há um erro de sintaxe quando você colocou parênteses após a função ajax e outro conjunto de parênteses para definir a lista de argumentos: -

Como você escreveu: -

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

Os parênteses em torno do ajax devem ser removidos e devem ser: -

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

Encontrei a mesma pergunta e minha solução foi: adicione o script JQuery.

Especialmente, devemos garantir que o JQuery correspondente seja carregado quando depurarmos nossos js no firefox / chrome.

Jianeng Xu
fonte
1

Se você estiver usando o modelo html de bootstrap, lembre-se de remover o link para jquery slim na parte inferior do modelo. Eu posto esses detalhes aqui, pois ainda não posso comentar as respostas.

Lily H.
fonte
0

Para qualquer pessoa que tente executar isso no nodejs : Não funcionará imediatamente , pois o jquery precisa de um navegador (ou similar)! Eu estava apenas tentando executar a importação e estava registrando o console.log($)que escreveu [Function]e depois o console.log($.ajax)que retornou undefined. Eu não tinha tscerros e tinha preenchido automaticamente a partir do intellij, então fiquei imaginando o que estava acontecendo.

Então, em algum momento, percebi que esse nodepoderia ser o problema e não o texto datilografado. Eu tentei o mesmo código no navegador e funcionou. Para fazê-lo funcionar, você precisa executar:

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

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

(créditos: https://stackoverflow.com/a/4129032/3022127 )

bersling
fonte
-1

É tarde demais para uma resposta, mas essa resposta pode ser útil para futuros leitores.

Gostaria de compartilhar um cenário em que, digamos, há vários arquivos html ( um html base e vários sub-HTMLs ) e $ .ajax está sendo usado em um dos sub-HTMLs.

Suponha que no sub-HTML, js seja incluído na URL " https://code.jquery.com/jquery-3.5.0.js " e no HTML base / pai, na URL - " https: //code.jquery .com / jquery-3.1.1.slim.min.js ", a versão reduzida do JS será usada em todas as páginas que usam esse sub-HTML, bem como no HTML básico mencionado acima.

Isso é especialmente verdade no caso de usar a estrutura de autoinicialização que carrega js usando " https://code.jquery.com/jquery-3.1.1.slim.min.js ".

Portanto, para resolver o problema, é necessário garantir que, em todas as páginas, js seja incluído via URL " https://code.jquery.com/jquery-3.5.0.js " ou seja qual for o URL mais recente que contém todas as bibliotecas JQuery.

Agradeço a Lily H. por me indicar essa resposta.

AwsAnurag
fonte
-2

deixe-me compartilhar minha experiência:

meu designer de página html usa:

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

quando crio uma solicitação AJAX simples, obtendo um erro dizendo: TypeError: $ .ajax (…) não é uma função

Então, eu adiciono:

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

então, funciona perfeitamente para mim, pelo menos.

Sriparna Ghosh
fonte
Não. Carregar o jQuery slim e substituí- lo imediatamente com o jQuery é totalmente inútil e um desperdício de largura de banda.
Quentin