JQuery: 'Uncaught TypeError: Illegal invocation' pada permintaan ajax - beberapa elemen

Saya memiliki dua elemen terpilih, A dan B: ketika opsi yang dipilih A berubah, opsi B harus diperbarui. Setiap elemen di A menyiratkan banyak elemen di B, ini adalah hubungan satu-ke-banyak (A berisi negara, B harus berisi kota yang terletak di negara tertentu).

Fungsi tersebut do_ajaxharus menjalankan permintaan asinkron:

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

Untuk memperbarui opsi B saya telah menambahkan panggilan fungsi di onChangeacara A. Berikut adalah fungsi yang berjalan saat event onChange (of A) dipicu:

function my_onchange(e) // "e" is element "A"
{
    var sel_B = ... ; // get select element "B"

    // I skipped some code here
    // ...

    var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
    };
    do_ajax(city_sel, data, 'ajax_handler.php');
}

}

Saya telah membaca di dokumen JQuery yang databisa berupa array (pasangan nilai kunci). Saya mendapatkan kesalahan jika saya meletakkan:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

Sebaliknya, saya tidak mendapatkan kesalahan itu jika data saya adalah string:

var data = 'mode=filter_city&id_A=' + e[e.selectedIndex];

Tetapi saya membutuhkan "versi array" dari variabel tersebut, dalam kode php sisi server saya.

Itu Uncaught TypeError: Illegal invocationterletak di file "jquery-1.7.2.min.js", yang semuanya dikompresi, jadi saya tidak tahu bagian mana dari kode yang memunculkan kesalahan.

Apakah ada pengaturan yang dapat saya ubah dalam kode saya sehingga menerima data sebagai array asosiatif?

Berkat pembicaraan dengan Sarfraz, kami dapat menemukan solusinya.

Masalahnya adalah saya melewatkan elemen HTML alih-alih nilainya, yang sebenarnya ingin saya lakukan (sebenarnya dalam kode php saya, saya memerlukan nilai itu sebagai kunci asing untuk menanyakan citiestabel saya dan memfilter entri yang benar).

Jadi, alih-alih:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

harus:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex].value
};

Catatan: periksa jawaban Jason Kulatunga , ini mengutip dokumen JQuery untuk menjelaskan mengapa melewatkan elemen HTML menyebabkan masalah.

Dari dokumen jQuery untuk processData:

processData Boolean
^{Default: true}
Secara default, data yang diteruskan ke opsi data sebagai objek (secara teknis, apa pun selain string) akan diproses dan diubah menjadi string kueri, sesuai dengan jenis konten default "application / x-www -form-urlencoded ". Jika Anda ingin mengirim DOMDocument, atau data tidak diproses lainnya, setel opsi ini ke false.

Sumber: http://api.jquery.com/jquery.ajax

Sepertinya Anda harus menggunakan processDatauntuk mengirim data Anda ke server, atau memodifikasi skrip php Anda untuk mendukung parameter yang dikodekan querystring.

Saya mendapatkan kesalahan ini saat memposting objek FormData karena saya tidak menyiapkan panggilan ajax dengan benar. Penyiapan di bawah memperbaiki masalah saya.

var myformData = new FormData();        
myformData.append('leadid', $("#leadid").val());
myformData.append('date', $(this).val());
myformData.append('time', $(e.target).prev().val());

$.ajax({
    method: 'post',
    processData: false,
    contentType: false,
    cache: false,
    data: myformData,
    enctype: 'multipart/form-data',
    url: 'include/ajax.php',
    success: function (response) {
        $("#subform").html(response).delay(4000).hide(1); 
    }
});

Saya telah membaca di dokumen JQuery bahwa data dapat berupa array (pasangan nilai kunci). Saya mendapatkan kesalahan jika saya meletakkan:

Ini objek bukan array:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

Anda mungkin ingin:

var data = [{
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
}];

Mengalami masalah yang sama baru-baru ini, diselesaikan dengan menambahkan traditional: true,

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        **contentType: false,
        processData: false**
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

$.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });

Coba ini:

            $.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });