jQuery：ajaxリクエストでの「Uncaught TypeError：Illegal invocation」-いくつかの要素

AとBの2つの選択要素があります。Aの選択されたオプションが変更されると、それに応じてBのオプションを更新する必要があります。Aの各要素はBの多くの要素を意味します。これは1対多の関係です（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イベントに関数呼び出しを追加しました。これは、（のA）onChangeイベントがトリガーされたときに実行される関数です。

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」ファイルにあり、すべて圧縮されているため、コードのどの部分でエラーが発生したのかわかりませんでした。

データを連想配列として受け入れるようにコードで変更できる設定はありますか？

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の回答を確認してください。JQuery ドキュメントを引用して、HTML要素を渡すと問題が発生する理由を説明しています。

のjQueryドキュメントからprocessData：

processDataブール値
^{デフォルト：true}
デフォルトでは、データオプションにオブジェクトとして渡されたデータ（技術的には文字列以外のもの）が処理され、クエリ文字列に変換され、デフォルトのコンテンツタイプ "application / x-www"に適合します。 -form-urlencoded "。DOMDocumentまたはその他の未処理データを送信する場合は、このオプションをfalseに設定します。

ソース：http : //api.jquery.com/jquery.ajax

を使用processDataしてデータをサーバーに送信するか、phpスクリプトを変更してクエリ文字列でエンコードされたパラメーターをサポートする必要があるようです。

私はajax呼び出しを正しく設定していなかったため、FormDataオブジェクトの投稿中にこのエラーが発生しました。以下の設定で問題が解決しました。

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