当数据参数是数组时，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：非法调用’