TypeError : $ .ajax (…) 함수가 아니십니까?


231

MySQL 데이터베이스에서 일부 데이터를 반환하는 간단한 AJAX 요청을 만들려고합니다. 아래 내 기능은 다음과 같습니다.

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

... 필요한 매개 변수를 파싱하여 여기에 전화합니다.

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

그러나 성공 콜백이 실행되지 않고 ( "성공!"이 콘솔에 기록되지 않기 때문에) 콘솔에 오류가 발생합니다.

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

이것은 무엇을 의미 하는가? 성공 이벤트가 $ .ajax 내에서 익명 함수를 트리거하기 전에 AJAX 요청을 수행했지만 이제는 별도의 명명 된 함수 (이 경우 콜백)를 실행하려고합니다. 어떻게하면 되나요?


2
jquery 포함 여부
— Arun P Johny

2
이 $ .ajax () 변경 ({
— Prabhu Murthy

3
$.ajax인수없이 ( $.ajax())를 호출 했으며 반환 값은 함수가 아닌 jqXHR 객체입니다. 따라서 $.ajax()(...)오류가 발생합니다.
— Felix Kling

2
jquery.js를 포함 시키거나 함수 호출 아래에 jquery.js를 포함 시켰거나 jQuery.ajax를 시도하십시오 ($를 jQuery로 대체하십시오).
— Pranay Bhardwaj

90
내가 사용하기 때문에 내 경우에는, 그건 슬림 축소 된 AJAX 기능을한다 JQuery와 버전
— TomNg

답변:


952

여기의 답변 중 어느 것도 도움이되지 않았습니다. 문제는 : jQuery의 슬림 빌드를 사용하고 있었는데, 일부는 제거되었지만 ajax는 그중 하나입니다.

해결 방법 : jQuery의 일반 (압축 또는 비 압축) 버전을 여기 에 다운로드하여 프로젝트에 포함하십시오.


56
이것이 내 문제를 해결 한 것입니다! 도대체 jQuery ?? $.ajax"슬림"빌드에서 제거 된 이유는 무엇 입니까?
— samnau

57
슬림 빌드는 다른 피해자를 주장했다.
— Drew Kennedy

49
Bootstrap에서 코드를 복사했습니다. 그들은 슬림 버전을 사용합니다. 어쩌면 당신도?
— Cyril N.

126

슬림 버전이 아닌 전체 버전의 jquery를 사용하고 있는지 다시 확인하십시오.

jquery와 함께 제공되는 jquery cdn-script 링크를 사용하고있었습니다. 문제는 이것이 기본적으로 slim.jquery.js이며, ajax기능 이없는 것입니다. 따라서 (Bootstrap 웹 사이트에서 복사하여 붙여 넣은) 슬림 버전 jquery 스크립트 링크를 사용하는 경우 전체 버전을 대신 사용하십시오.

즉, <script src="https://code.jquery.com/jquery-3.1.1.min.js"> 대신에 사용 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"


27

확실하지 않지만 코드에 구문 오류가있는 것 같습니다. 시험:

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

옆에 추가 괄호 $.ajax가 필요하지 않았습니다. 여전히 오류가 발생하면 jQuery 스크립트 파일이로드되지 않은 것입니다.


2
구문 오류가 아닙니다. 반환 값은 그렇지 않은 함수일 것으로 예상되었습니다.
— Felix Kling

아아 따라서 실제로이 문제는 jQuery 스크립트 파일 참조가 실제로 누락되었습니다.
— Jason Evans

3
아뇨 $.ajax()();. 이것은 유효한 JavaScript입니다. 그것은 "전화 $.ajax를하면 무엇이든 돌려주십시오"라는 의미입니다. 그러나 $.ajax함수 (호출 될 수있는)를 반환하지 않고 jqXHR개체를 반환 하므로 오류가 발생합니다. 귀하의 답변은 정확하고 추가 ()사항은 문제이지만 문제에 대한 설명은 정확하지 않습니다 (구문 오류가 아니며 적어도 파서는 아닙니다).
— Felix Kling

아니요, 죄송합니다. 이전 의견에서 언급 한 내용입니다. 구문이 유효하기 때문에 이는 구문 오류 문제가 아니라 $ .ajax () 사용시로드되지 않은 jQuery 스크립트 파일 관련 문제입니다.
— Jason Evans

2
아니요, jquery.js가 누락되지 않았지만 (오류가에 관한 것일 경우 $) 유효한 JS라는 구문 오류는 아닙니다. 원하는 동작에 적합한 구문이 아니기 때문에 Felix에서 설명한대로 런타임 오류가 발생합니다.
— nnnnnn

9

를 체크 아웃 JQuery와 문서

지원 중단 공지 : jqXHR.success (), jqXHR.error () 및 jqXHR.complete () 콜백은 jQuery 3.0부터 제거되었습니다. 대신 jqXHR.done (), jqXHR.fail () 및 jqXHR.always ()를 사용할 수 있습니다.


3
이것은 질문과 전혀 관련이 없으며, 더 이상 사용되지 않는 방법은이 질문에 사용되지 않습니다.
— Kevin B

3

AJAX 함수에 오류가 있습니다. 대괄호가 너무 많습니다. 대신 시도하십시오 $.ajax({


3

아약스가 포함 된 jquery 최소 버전을 참조하십시오.

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

2

인수 목록을 정의하기 위해 ajax 함수 및 괄호 세트 뒤에 괄호를 배치하면 구문 오류가 있습니다.

당신이 쓴대로 :-

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

아약스 주위의 괄호는 제거해야합니다 :-

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

1

나는 같은 질문에 직면했고, 해결책은 JQuery 스크립트를 추가하는 것이었다.

특히, firefox / chrome에서 js를 디버깅 할 때 해당 JQuery가로드되었는지 확인해야합니다.


1

부트 스트랩 HTML 템플리트를 사용하는 경우 템플리트 맨 아래에서 jquery slim에 대한 링크를 제거하십시오. 나는 아직 답변을 언급 할 수 없으므로이 세부 사항을 여기에 게시합니다 ..


0

nodejs 에서 이것을 실행하려고하는 모든 사람들에게 : jquery에는 브라우저 (또는 비슷한)가 필요하기 때문에 즉시 작동하지 않습니다! 난 그냥 실행 가져 오기를 얻으려고 노력 및 로깅이었다 console.log($)썼다 [Function]또한 다음과 console.log($.ajax)반환한다 undefined. 나는 아니었다tsc 오류 intellij에서 자동 완성 기능을 사용했기 때문에 무슨 일이 일어나고 있는지 궁금했습니다.

그런 다음 어느 시점에서 나는 그것이 node타이프 스크립트가 아니라 문제 일 수 있음을 깨달았습니다 . 브라우저에서 동일한 코드를 사용해 보았습니다. 작동하게하려면 다음을 실행해야합니다.

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

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

(신용 : https://stackoverflow.com/a/4129032/3022127 )


-1

답변이 너무 늦었지만이 답변은 향후 독자에게 도움이 될 수 있습니다.

여러 개의 html 파일 ( 하나의 기본 html 및 여러 개의 하위 HTML)이 있고 하위 HTML 중 하나에서 $ .ajax가 사용되는 시나리오를 공유하고 싶습니다 .

하위 HTML에서 js가 URL " https://code.jquery.com/jquery-3.5.0.js " 를 통해 포함 되고 기본 / 부모 HTML에서 URL을 통해 포함된다고 가정합니다 - " https : //code.jquery .com / jquery-3.1.1.slim.min.js "를 선택하면 위에서 언급 한 기본 HTML뿐만 아니라이 하위 HTML을 사용하는 모든 페이지에서 JS의 슬림 버전이 사용됩니다.

이것은 " https://code.jquery.com/jquery-3.1.1.slim.min.js "를 사용하여 js를로드하는 부트 스트랩 프레임 워크를 사용하는 경우에 특히 그렇습니다 .

따라서 문제점을 해결하려면 모든 페이지에서 js가 URL " https://code.jquery.com/jquery-3.5.0.js "또는 모든 JQuery 라이브러리를 포함하는 최신 URL을 통해 포함되어 있는지 확인해야합니다 .

이 답변 을 알려준 Lily H. 에게 감사합니다 .


-2

내 경험을 공유하겠습니다 :

내 HTML 페이지 디자이너 사용 :

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

간단한 AJAX 요청을 만들 때 오류가 발생하면 TypeError : $ .ajax (…)는 함수가 아닙니다.

그래서 나는 추가합니다 :

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

그런 다음 적어도 완벽하게 작동합니다.


아니요. jQuery를 슬림하게로드 한 다음 즉시 jQuery로 덮어 쓰는 것은 무의미하며 대역폭 낭비입니다.
— Quentin
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.