TypeError: $ .ajax (...) no es una función?


231

Estoy tratando de crear una solicitud AJAX simple que devuelva algunos datos de una base de datos MySQL. Aquí está mi función a continuación:

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

... y aquí es donde lo llamo, analizando los parámetros requeridos:

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

Sin embargo, mi devolución de llamada de éxito no se ejecuta (ya que "¡éxito!" No se registra en la consola), y aparece un error en mi consola:

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

¿Qué significa esto? He hecho solicitudes AJAX antes donde el evento de éxito desencadena una función anónima dentro de $ .ajax, pero ahora estoy tratando de ejecutar una función con nombre separada (en este caso, una devolución de llamada). ¿Cómo hago para esto?


2
si jquery está incluido
Arun P Johny

2
cambie este $ .ajax () ({a $ .ajax ({
Prabhu Murthy

3
Usted llamó $.ajaxsin argumentos ( $.ajax()) y el valor de retorno es un objeto jqXHR, que no es una función. Por $.ajax()(...)lo tanto arrojará un error.
Felix Kling

2
o no incluyó jquery.js O ha incluido jquery.js debajo de la llamada a la función O intente jQuery.ajax (reemplace $ con jQuery).
Pranay Bhardwaj

90
En mi caso, es porque utilicé una versión minimada delgada de JQuery que saca la función ajax
TomNg

Respuestas:


952

Ninguna de las respuestas aquí me ayudó. El problema era: estaba usando la versión delgada de jQuery , que tenía algunas cosas eliminadas, siendo ajax una de ellas.

La solución: simplemente descargue la versión normal (comprimida o no) de jQuery aquí e inclúyala en su proyecto.


56
¡Esto es lo que solucionó mi problema! ¿Qué diablos jQuery? ¿Por qué se $.ajaxelimina de la compilación "delgada"?
samnau

57
La construcción delgada reclamó a otra víctima.
Drew Kennedy

49
Copié el código de Bootstrap. Usan la versión delgada. ¿Quizás tú también?
Cyril N.

126

Vuelva a verificar si está utilizando la versión completa de jquery y no alguna versión delgada.

Estaba usando el enlace jquery cdn-script que viene con jquery. El problema es que, por defecto, es slim.jquery.js, que no tiene la ajaxfunción. Por lo tanto, si está utilizando el enlace de secuencia de comandos jquery de versión delgada (copiado y pegado del sitio web de Bootstrap), use la versión completa.

Es decir, usar en <script src="https://code.jquery.com/jquery-3.1.1.min.js"> lugar de <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"


27

No estoy seguro, pero parece que tiene un error de sintaxis en su código. Tratar:

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

Tenía corchetes adicionales al lado de los $.ajaxcuales no eran necesarios. Si aún recibe el error, el archivo de script jQuery no se carga.


2
No es un error de sintaxis. Se esperaba que el valor de retorno fuera una función que no es.
Felix Kling

Ahhh ya veo. Entonces, realmente, este problema es solo una referencia de archivo de script jQuery que falta realmente.
Jason Evans

3
No. Míralo como $.ajax()();. Este es JavaScript válido. Significa "llame $.ajaxy lo que sea que devuelva, llámelo también". Pero $.ajaxno devuelve una función (que podría llamarse), devuelve un jqXHRobjeto, por lo que arroja un error. Su respuesta es correcta, lo adicional ()es el problema, pero la descripción del problema no es correcta (no es un error de sintaxis, bueno, al menos no para el analizador).
Felix Kling

No, lo siento, eso es lo que decía en mi comentario anterior; que este no es un problema de error de sintaxis, ya que la sintaxis es válida, sino más bien un problema con el archivo de script jQuery no cargado en el momento en que se usa $ .ajax ().
Jason Evans

2
No, no falta jquery.js (si fuera el error sería sobre el $), pero tampoco es un error de sintaxis porque es JS válido. Simplemente no es la sintaxis adecuada para el comportamiento deseado, por lo que causa un error de tiempo de ejecución como lo explica Felix.
nnnnnn

9

El pago y envío de documentación Jquery

Aviso de desaprobación: las devoluciones de llamada jqXHR.success (), jqXHR.error () y jqXHR.complete () se eliminan a partir de jQuery 3.0. Puede usar jqXHR.done (), jqXHR.fail () y jqXHR.always () en su lugar.


3
Esto no es relevante para la pregunta en absoluto, ninguno de esos métodos obsoletos está en uso con esta pregunta ..
Kevin B

3

Tiene un error en su función AJAX, demasiados corchetes, intente en su lugar $.ajax({


3

Consulte la versión jquery min que incluye ajax:

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

2

Hay un error de sintaxis ya que ha colocado paréntesis después de la función ajax y otro conjunto de paréntesis para definir la lista de argumentos:

Como has escrito: -

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

El paréntesis alrededor de ajax debe eliminarse, debe ser: -

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

1

Encontré la misma pregunta, y mi solución fue: agregar el script JQuery.

Especialmente, debemos asegurarnos de que se cargue el JQuery correspondiente cuando depuremos nuestro js bajo firefox / chrome.


1

Si está utilizando la plantilla html de bootstrap, recuerde eliminar el enlace a jquery slim en la parte inferior de la plantilla. Publico este detalle aquí ya que aún no puedo comentar las respuestas.


0

Para cualquiera que intente ejecutar esto en nodejs : ¡No funcionará de inmediato, ya que jquery necesita un navegador (o similar)! Solo estaba tratando de ejecutar la importación y estaba registrando lo console.log($)que escribió [Function]y luego también lo console.log($.ajax)que regresó undefined. No tuve tscerrores y tuve autocompletar desde intellij, así que me preguntaba qué está pasando.

Luego, en algún momento, me di cuenta de que ese nodepodría ser el problema y no el mecanografiado. Intenté el mismo código en el navegador y funcionó. Para que funcione, debes ejecutar:

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

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

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


-1

Esto es demasiado tarde para una respuesta, pero esta respuesta puede ser útil para futuros lectores.

Me gustaría compartir un escenario en el que, digamos, hay varios archivos html ( un html base y varios sub-HTML ) y $ .ajax se está utilizando en uno de los sub-HTML.

Supongamos que en el sub-HTML, js se incluye a través de la URL " https://code.jquery.com/jquery-3.5.0.js " y en el HTML base / primario, a través de la URL - " https: //code.jquery .com / jquery-3.1.1.slim.min.js ", entonces la versión delgada de JS se usará en todas las páginas que usan este sub-HTML, así como el HTML base mencionado anteriormente.

Esto es especialmente cierto en el caso de usar el marco de arranque que carga js usando " https://code.jquery.com/jquery-3.1.1.slim.min.js ".

Por lo tanto, para resolver el problema, debe asegurarse de que en todas las páginas, js se incluya a través de la URL " https://code.jquery.com/jquery-3.5.0.js " o la URL más reciente que contenga todas las bibliotecas de JQuery.

Gracias a Lily H. por señalarme hacia esta respuesta.


-2

déjame compartir mi experiencia:

mi diseñador de páginas html usa:

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

cuando creo una solicitud AJAX simple, aparece un error que dice: TypeError: $ .ajax (...) no es una función

Entonces, agrego:

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

entonces, al menos me funciona perfectamente.


No. Cargar jQuery slim y luego sobrescribirlo inmediatamente con jQuery no tiene sentido y es una pérdida de ancho de banda.
Quentin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.