JQuery: 'Uncaught TypeError: Illegal invocation' na solicitação ajax - vários elementos

Eu tenho dois elementos selecionados, A e B: quando a opção selecionada de A muda, as opções de B devem ser atualizadas de acordo. Cada elemento em A implica muitos elementos em B, é uma relação um-para-muitos (A contém nações, B deve conter cidades localizadas em uma determinada nação).

A função do_ajaxdeve executar a solicitação assíncrona:

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

Para atualizar as opções de B, adicionei uma chamada de função no onChangeevento de A. Esta é a função que é executada quando o evento onChange (de A) é acionado:

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

}

Eu li em documentos JQuery que datapodem ser uma matriz (pares de valores-chave). Recebo o erro se colocar:

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

Em vez disso, não recebo esse erro se meus dados forem uma string:

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

Mas eu preciso da "versão do array" da variável, no meu código php do lado do servidor.

O Uncaught TypeError: Illegal invocationestá localizado no arquivo "jquery-1.7.2.min.js", que está todo compactado, então não consegui descobrir que parte do código gerou o erro.

Existe alguma configuração que eu possa alterar em meu código para que ele aceite dados como uma matriz associativa?

Graças à conversa com Sarfraz , pudemos descobrir a solução.

O problema era que eu estava passando um elemento HTML em vez de seu valor, que é realmente o que eu queria fazer (na verdade, no meu código php, preciso desse valor como uma chave estrangeira para consultar minha citiestabela e filtrar as entradas corretas).

Então, em vez de:

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

deveria ser:

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

Nota: verifique a resposta de Jason Kulatunga , ela cita o documento JQuery para explicar por que a passagem de um elemento HTML estava causando problemas.

Dos documentos jQuery para processData:

processData Boolean
^{Padrão: true}
Por padrão, os dados passados ​​para a opção de dados como um objeto (tecnicamente, qualquer coisa diferente de uma string) serão processados ​​e transformados em uma string de consulta, ajustando-se ao tipo de conteúdo padrão "application / x-www -form-urlencoded ". Se você deseja enviar um DOMDocument ou outros dados não processados, defina esta opção como false.

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

Parece que você terá que usar processDatapara enviar seus dados para o servidor ou modificar seu script php para suportar parâmetros codificados de querystring.

Eu estava recebendo este erro ao postar um objeto FormData porque não estava configurando a chamada ajax corretamente. A configuração abaixo corrigiu meu problema.

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

Eu li em documentos JQuery que os dados podem ser uma matriz (pares de valores-chave). Recebo o erro se colocar:

Este é um objeto, não uma matriz:

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

Você provavelmente quer:

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

Tive o mesmo problema recentemente, resolvido ao adicionar 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) {}
                  });

Experimente isto:

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