JQuery: 'Uncaught TypeError: Незаконне виклик' на запит ajax - кілька елементів

У мене є два елементи вибору, A і B: коли вибраний варіант A змінюється, параметри B повинні бути оновлені відповідно. Кожен елемент A передбачає багато елементів у B, це відносини один до багатьох (A містить нації, B має містити міста, розташовані в даній нації).

Функція do_ajaxповинна запускати асинхронний запит:

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

Щоб оновити параметри B, я додав виклик функції в onChangeподії A. Ось функція, яка запускається при запуску onChange події (з A):

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');
}

}

Я читав у документах JQuery, які dataможуть бути масивом (парами ключових значень). Я отримую помилку, якщо ставлю:

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

Натомість я не отримую цієї помилки, якщо мої дані є рядком:

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

Але мені потрібна "версія масиву" змінної в моєму сервері на PHP-коді.

Uncaught TypeError: Illegal invocationЗнаходиться в файлі «JQuery-1.7.2.min.js», який все стискається, так що я не міг зрозуміти, яка частина коду підняв помилку.

Чи можу я змінити свій код у своєму коді, щоб він приймав дані як асоціативний масив?

Завдяки розмові з Сарфраз ми могли знайти рішення.

Проблема полягала в тому, що я передавав HTML-елемент замість його значення, що насправді те, що я хотів зробити (адже в моєму PHP-коді мені потрібно це значення як зовнішній ключ для запиту моєї citiesтаблиці та фільтрації правильних записів).

Отже, замість:

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

вона повинна бути:

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

Примітка: перевірити Джейсон Kulatunga в відповідь , він цитує JQuery документ , щоб пояснити , чому пропускання HTML елемент є причиною неприємностей.

З документів jQuery для processData:

processData Boolean
^{За замовчуванням: true}
За замовчуванням дані, передані в параметр даних як об’єкт (технічно що-небудь, крім рядка), будуть оброблені та перетворені в рядок запиту, що відповідає стандартному вмісту типу "application / x-www -форма-урленкодований ". Якщо ви хочете надіслати документ DOMDocument або інші неопрацьовані дані, встановіть цей параметр на значення false.

Джерело: http://api.jquery.com/jquery.ajax

Схоже, вам доведеться використовувати processDataдля надсилання своїх даних на сервер або змінити ваш скрипт php для підтримки параметрів закодованих запитів.

Я отримував цю помилку під час публікації об’єкта FormData, оскільки я неправильно налаштував виклик ajax. Налаштування нижче вирішили мою проблему.

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); 
    }
});

Я читав в документах JQuery, що дані можуть бути масивом (парами ключових значень). Я отримую помилку, якщо ставлю:

Це об'єкт не масив:

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

Ви, мабуть, хочете:

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

Було те саме питання нещодавно, вирішене додаванням 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) {}
                  });

Спробуйте це:

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