JQuery:ajax请求中的'Uncaught TypeError:Illegal invocation' - 几个元素

Question

我有两个选择元素,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事件中添加了一个函数调用.这A是触发onChange事件(of )时运行的函数:

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"的文件,这是所有的压缩,所以我无法弄清楚哪些代码部分提出的错误.

我可以在代码中更改任何设置,以便将数据作为关联数组接受吗？

Answer 1

感谢与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 doc来解释为什么传递HTML元素会导致麻烦.

Answer 2

来自jQuery文档processData:

processData Boolean
^{默认值:true}
默认情况下,作为对象传入数据选项的数据(技术上,不是字符串)将被处理并转换为查询字符串,适合默认内容类型"application/x-www -形式进行了urlencoded".如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false.

资料来源:http: //api.jquery.com/jquery.ajax

看起来您将不得不使用processData将数据发送到服务器,或修改您的PHP脚本以支持查询字符串编码的参数.

Answer 3

我在JQuery文档中读到数据可以是一个数组(键值对).如果我把错误收到错误:

这是对象而不是数组:

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

你可能想要:

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

Answer 4

我在发布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); 
            }
        });

Answer 5

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

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

Answer 6

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

Answer 7

我遇到了同样的问题，我可以按如下方式纠正它。

var formData = new FormData(document.getElementById('form_id'));
                                
$.ajax({
  type: 'POST',
  url: '/Settings/de_acc',
  data: formData,
  cache: false,
  contentType: false,
  processData: false,
  success: function(res){
    console.log(res);
  }
})