JQuery: "Неподготовлен TypeError: незаконный вызов" в ajax-запросе, когда параметр данных является массивом

У меня есть два элемента select: A и B: при выборе выбранной опции, опции 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, я добавил вызов функции в событие A onChange. Вот функция, которая запускается при запуске события 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 docs, что data может быть массивом (пары значений ключа). Я получаю ошибку, если я поставлю:

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

Вместо этого я не получаю эту ошибку, если мои данные являются строкой:

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

Но мне нужна "версия массива" этой переменной в моем php-коде на стороне сервера.

Uncaught TypeError: Illegal invocation находится в файле jquery-1.7.2.min.js, который все сжат, поэтому я не мог понять, какая часть кода подняла ошибку.

Есть ли какой-либо параметр, который я могу изменить в своем коде, чтобы он принимал данные как ассоциативный массив?

Ответ 1

Благодаря разговору с Sarfraz мы смогли найти решение.

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

Итак, вместо:

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

это должно быть:

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

Примечание: проверьте Jason Kulatunga answer, он цитирует JQuery doc, чтобы объяснить, почему передача HTML-элемента вызывала проблемы.

Ответ 2

Из документов jquery для processData:

processDatastrong > Булевский
^{По умолчанию: true}
По умолчанию данные, переданные в параметр данных в виде объекта (технически, ничего, кроме строки), будут обрабатываться и преобразовываться в строку запроса, подходящую к стандартным типам контента "application/x-www-form-urlencoded", Если вы хотите отправить DOMDocument или другие необработанные данные, установите для этого параметра значение false.

Похоже, вам нужно будет использовать processData для отправки ваших данных на сервер или изменить ваш php script, чтобы поддерживать зашифрованные параметры запроса.

Ответ 3

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

Это объект не массив:

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

Вероятно, вы хотите:

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

Ответ 4

Если бы такая же проблема была недавно решена, добавив traditional: true,

Ответ 5

Попробуйте следующее:

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