web-dev-qa-db-ja.com

JQuery： 'Uncaught TypeError：Illegal invocation' at ajax request-いくつかの要素

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 docsdataは配列（キーと値のペア）になることができます。次のように入力すると、エラーが発生します。

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

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

htmlajaxjquery
98
Nadir Sampaoli

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ドキュメントを引用して、HTML要素の受け渡しが問題を引き起こした理由を説明します。

132
Nadir Sampaoli

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

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

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

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

40
Jason Kulatunga

JQueryドキュメントで、データが配列（キーと値のペア）になる可能性があることを読みました。次のように入力すると、エラーが発生します。

これは配列ではなくオブジェクトです：

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

おそらくあなたは：

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

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); 
            }
        });
9
Mike Volmar

最近同じ問題があり、traditional: true,を追加することで解決しました

5
deco