131

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

onChangeBのオプションを更新するために、Aのイベントに関数呼び出しを追加しました。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」ファイルにあるため、コードのどの部分でエラーが発生したのかわかりませんでした。

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

4

10 に答える 10

170

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

于 2012-06-17T12:41:00.537 に答える
52

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

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

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

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

于 2012-06-17T12:28:33.677 に答える
51

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); 
    }
});
于 2018-01-29T15:35:40.187 に答える
13

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

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

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

あなたはおそらく欲しい：

var data = [{
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
}];
于 2012-06-17T11:57:29.550 に答える
11

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

于 2017-04-10T15:21:52.350 に答える
4

この問題を取り除くには、次の手順に従ってください。

$.ajax({
   url: 'https://your-api-endpoint',
   type: 'post',
   data: new formData(this),
   processData: false,
   contentType: false,
   success: function(response) {
      console.log(response)
   }
})

processData：falseとcontentType：falseを使用する必要があります。これらの2行です。あなたの問題は解決されます。

于 2020-12-07T10:55:54.337 に答える
0 
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;
        }
    });
}
于 2018-08-23T17:13:29.677 に答える
0

私のillegal invocationエラーは、オブジェクトの値の1つとして$.getJSON渡すことによって発生しました。エラーを解決した修正。undefineddata

于 2021-12-18T22:42:06.377 に答える
-1 
$.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });
于 2018-02-22T16:17:47.383 に答える
-2

これを試して：

            $.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });
于 2017-01-17T04:55:45.767 に答える