Html JQuery：在ajax请求下：“uncaughtTypeError:非法调用”-几个元素

我有两个选择元素，A和B：当A的选择选项更改时，B的选项必须相应地更新。A中的每个元素都意味着B中的许多元素，这是一种一对多的关系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事件时运行的函数：

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

}

我已经读到数据可以是数组键值对。如果我输入以下内容，则会得到错误：

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

相反，如果我的数据是字符串，则不会出现该错误：

var data = 'mode=filter_city&id_A=' + e[e.selectedIndex];

但是我需要变量的数组版本，在我的服务器端php代码中

未捕获的TypeError：非法调用位于jquery-1.7.2.min.js文件中，该文件已全部压缩，因此我无法确定是哪部分代码引发了错误

我的代码中是否有任何设置可以更改，以便它将数据作为关联数组接受

我在JQuery文档中读到数据可以是数组键值对。 如果我输入以下内容，则会得到错误：

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

此对象不是数组：

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

您可能想要：

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

从processData的jQuery文档：

processData布尔值 默认值：true 默认情况下，作为对象传入数据选项的数据（从技术上讲，字符串以外的任何内容）将被处理并转换为查询字符串，符合默认的内容类型application/x-www-form-urlencoded。如果要发送DOMDocument或其他未处理的数据，请将此选项设置为false

资料来源：

看起来您必须使用processData将数据发送到服务器，或者修改php脚本以支持querystring编码参数。

感谢与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元素会导致问题的原因。

尝试以下方法：

            $.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });

---

最近，通过添加traditional:true解决了同样的问题，

我在发布FormData对象时遇到了这个错误，因为我没有正确设置ajax调用。下面的安装程序修复了我的问题

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

---

请按照以下步骤解决此问题：

$.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这两行。您的问题将得到解决。

它不再抛出该错误，但似乎此数据没有传递到我的$\u GET array服务器端var\u export$\u GET outputs array'undefined'=>'undefined'，@nadirs:尝试在$中定义方法类型。ajax处理程序：类型：'GET'，@Sarfraz结果相同。服务器端，数据密钥应该在GET数组中找到，对吗？或者它们可能是通过另一个请求方法发送的？@nadirs:类似这样的工作数据：{foo:'myfoo'，bar:'mybar'}，我想可能还有其他问题。@Sarfraz我是个白痴，我发送了一个HTML对象e[e.selectedIndex]，而我应该传递它的值e[e.selectedIndex].value。修复此缺陷后，对象表示法工作正常。这是真的。如果我能看到它之前，它会指出我的代码中的实际错误。谢谢，我会在我的回答中添加一个注释。这实际上是可行的，我假设只有在现代浏览器中，看起来这样做才有效。。不知道为什么。。也不知道为什么它一开始就停止工作了——以前一切都很好！正是我在做的。忘记使用。valI正在传递变量中select html元素的选项。没有注意到它不是纯文本，而是html。如果包含解释，答案会更有用。A不仅仅是一个代码片段。它应该解释为什么会回答最初的问题，并提供相关文档的链接（如果有）。如果没有contentType和processData这两个字段，错误将继续显示。我添加了这两个字段，它对我起了作用。我想op是想指出这两个重要的领域。谢谢。你节省了我的时间，通过在我的ajax主体中添加processData:false、contentType:false、cache:false解决了我的问题。非常感谢。processData:false，contentType:false，cache:false，解决了我的问题。

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