TypeError: $ .ajax (...) bukan suatu fungsi?


231

Saya mencoba membuat permintaan AJAX sederhana yang mengembalikan beberapa data dari database MySQL. Inilah fungsi saya di bawah ini:

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

... dan di sinilah saya menyebutnya, parsing pada parameter yang diperlukan:

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

Namun, panggilan balik kesuksesan saya tidak berjalan (karena "sukses!" Tidak masuk ke konsol), dan saya mendapatkan kesalahan di konsol saya:

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

Apa artinya ini? Saya telah melakukan permintaan AJAX sebelumnya di mana peristiwa sukses memicu fungsi anonim dalam $ .ajax, tapi sekarang saya mencoba menjalankan fungsi bernama terpisah (dalam hal ini, panggilan balik). Bagaimana saya melakukannya?


2
apakah jquery sudah termasuk
Arun P Johny

2
ubah $ .ajax () ({menjadi $ .ajax ({
Prabhu Murthy

3
Anda dipanggil $.ajaxtanpa argumen ( $.ajax()) dan nilai kembali adalah objek jqXHR, yang bukan merupakan fungsi. Maka $.ajax()(...)akan terjadi kesalahan.
Felix Kling

2
apakah Anda tidak menyertakan jquery.js ATAU Anda telah memasukkan jquery.js di bawah panggilan fungsi ATAU silakan coba jQuery.ajax (ganti $ dengan jQuery).
Pranay Bhardwaj

90
Dalam kasus saya, itu karena saya menggunakan slim minified versi JQuery yang mengeluarkan fungsi ajax
TomNg

Jawaban:


952

Tidak ada jawaban di sini yang membantu saya. Masalahnya adalah: Saya menggunakan jQuery , yang memiliki beberapa hal dihapus, ajax menjadi salah satunya.

Solusinya: Cukup unduh versi jQuery biasa (dikompres atau tidak) di sini dan sertakan dalam proyek Anda.


56
Inilah yang memperbaiki masalah saya! Apa-apaan jQuery ?? Mengapa $.ajaxdihapus dari bangunan "ramping"?
samnau

57
Tubuh ramping mengklaim korban lain.
Drew Kennedy

49
Saya menyalin kode dari Bootstrap. Mereka menggunakan versi ramping. Mungkin kamu juga?
Cyril N.

126

Periksa ulang apakah Anda menggunakan jquery versi lengkap dan bukan versi ramping.

Saya menggunakan tautan skrip cdn-jquery yang dilengkapi dengan jquery. Masalahnya adalah yang ini secara default adalah slim.jquery.js yang tidak memiliki ajaxfungsi di dalamnya. Jadi, jika Anda menggunakan tautan skrip jquery versi ramping (disalin dari situs Bootstrap), gunakan versi lengkapnya.

Artinya, gunakan kata <script src="https://code.jquery.com/jquery-3.1.1.min.js"> ganti <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"


27

Tidak yakin, tetapi sepertinya Anda memiliki kesalahan sintaksis dalam kode Anda. Mencoba:

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

Anda memiliki tanda kurung tambahan di samping $.ajaxyang tidak diperlukan. Jika Anda masih mendapatkan kesalahan, maka file skrip jQuery tidak dimuat.


2
Itu bukan kesalahan sintaksis. Nilai pengembalian hanya diharapkan sebagai fungsi yang bukan.
Felix Kling

Ahhh begitu. Jadi sungguh, masalah ini hanyalah referensi file script jQuery yang hilang.
Jason Evans

3
Tidak. Lihatlah itu sebagai $.ajax()();. Ini adalah JavaScript yang valid. Ini berarti "panggil $.ajaxdan apa pun yang dikembalikan, panggil juga". Tetapi $.ajaxtidak mengembalikan fungsi (yang bisa disebut), ia mengembalikan jqXHRobjek, sehingga melempar kesalahan. Jawaban Anda benar, tambahan ()adalah masalahnya, tetapi deskripsi masalahnya tidak benar (itu bukan kesalahan sintaksis, setidaknya tidak untuk parser).
Felix Kling

Tidak, maaf, itulah yang saya nyatakan dalam komentar saya sebelumnya; bahwa ini bukan masalah kesalahan sintaksis, karena sintaksis sah, tetapi lebih merupakan masalah dengan file skrip jQuery tidak dimuat pada saat $ .ajax () digunakan.
Jason Evans

2
Tidak, jquery.js tidak hilang (jika kesalahannya adalah tentang $), tetapi itu bukan kesalahan sintaksis karena JS valid. Hanya saja, sintaksis yang tidak sesuai untuk perilaku yang diinginkan, sehingga menyebabkan kesalahan runtime seperti yang dijelaskan oleh Felix.
nnnnnn

9

Lihat Dokumentasi Jquery

Pemberitahuan Penghentian : callback jqXHR.success (), jqXHR.error (), dan jqXHR.complete () dihapus pada jQuery 3.0. Anda dapat menggunakan jqXHR.done (), jqXHR.fail (), dan jqXHR.always () sebagai gantinya.


3
Ini sama sekali tidak relevan dengan pertanyaan, tidak ada satupun dari metode yang sudah usang yang digunakan dengan pertanyaan ini ..
Kevin B

3

Anda memiliki kesalahan dalam fungsi AJAX Anda, terlalu banyak tanda kurung, coba saja $.ajax({


3

Referensi versi min jquery yang mencakup ajax:

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

2

Ada kesalahan sintaksis karena Anda telah menempatkan tanda kurung setelah fungsi ajax dan seperangkat tanda kurung lain untuk menentukan daftar argumen: -

Seperti yang telah Anda tulis: -

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

Tanda kurung di sekitar ajax harus dihapus harus: -

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

1

Saya mengalami pertanyaan yang sama, dan solusi saya adalah: tambahkan skrip JQuery.

Terutama, kita harus memastikan JQuery terkait dimuat ketika kita debug js kita di bawah firefox / chrome.


1

Jika Anda menggunakan template html bootstrap, ingatlah untuk menghapus tautan ke jquery slim di bagian bawah template. Saya memposting detail ini di sini karena saya belum dapat mengomentari jawaban ..


0

Bagi siapa pun yang mencoba menjalankan ini dalam nodejs : Ini tidak akan bekerja di luar kotak, karena jquery membutuhkan peramban (atau yang serupa)! Saya hanya mencoba untuk menjalankan impor dan login console.log($)yang menulis [Function]dan kemudian juga console.log($.ajax)yang kembali undefined. Saya tidak memiliki tsckesalahan dan autocomplete dari intellij, jadi saya bertanya-tanya apa yang terjadi.

Kemudian di beberapa titik saya menyadari bahwa nodemungkin itu masalah dan bukan naskah. Saya mencoba kode yang sama di browser dan berhasil. Untuk membuatnya bekerja, Anda perlu menjalankan:

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

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

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


-1

Ini sudah terlambat untuk jawaban tetapi tanggapan ini mungkin bermanfaat bagi pembaca di masa mendatang.

Saya ingin berbagi skenario di mana, katakanlah ada beberapa file html ( satu basis html dan beberapa sub-HTML ) dan $ .ajax digunakan di salah satu sub-HTML.

Misalkan dalam sub-HTML, js disertakan melalui URL " https://code.jquery.com/jquery-3.5.0.js " dan dalam HTML induk / induk, melalui URL - " https: //code.jquery .com / jquery-3.1.1.slim.min.js ", maka versi ramping JS akan digunakan di semua halaman yang menggunakan sub-HTML ini dan juga HTML dasar yang disebutkan di atas.

Ini terutama berlaku jika menggunakan kerangka bootstrap yang memuat js menggunakan " https://code.jquery.com/jquery-3.1.1.slim.min.js ".

Jadi untuk menyelesaikan masalah, perlu memastikan bahwa di semua halaman, js disertakan melalui URL " https://code.jquery.com/jquery-3.5.0.js " atau apa pun URL terbaru yang berisi semua perpustakaan JQuery.

Terima kasih kepada Lily H. karena mengarahkan saya ke jawaban ini.


-2

izinkan saya berbagi pengalaman saya:

desainer halaman html saya gunakan:

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

ketika saya membuat permintaan AJAX sederhana, mendapatkan kesalahan yang mengatakan, TypeError: $ .ajax (...) bukan fungsi

Jadi, saya menambahkan:

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

kemudian, setidaknya itu berfungsi dengan baik untuk saya.


Tidak. Memuat jQuery ramping dan kemudian segera menimpanya dengan jQuery sama sekali tidak ada gunanya dan membuang-buang bandwidth.
Quentin
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.