當數據參數是數組時，JQuery：在 ajax 請求時』未捕獲 TypeError：非法調用』

問題描述

我有兩個選擇元素 A 和 B：當 A 的選擇選項更改時，B 的選項必須相應更新。 A 中的每個元素意味着 B 中的許多元素，它是一個 one-to-many 關係 (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];

但是我需要”array version” 的變量，在我的 server-side 中的 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 的 answer，它引用了 JQuery doc 來解釋為什麼傳遞 HTML 元素會導致麻煩。

次佳解決方案

從 jquery docs for processData：

processData Boolean
^{Default: true}
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOMDocument, or other non-processed data, set this option to false.

看起來您將不得不使用 processData 將數據發送到服務器，或者修改您的 php 腳本來支持 querystring 編碼的參數。

第三種解決方案

I’ve read in JQuery docs that data can be an array (key value pairs). I get the error if I put:

這是對象不是數組：

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

你可能想要：

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

參考文獻

JQuery: ‘Uncaught TypeError: Illegal invocation’ at ajax request when data parameter is array

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

當數據參數是數組時，JQuery：在 ajax 請求時』未捕獲 TypeError：非法調用』