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

时间:2012-06-17 11:53:57

标签: html ajax jquery

我有两个选择元素,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事件(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&id_A=' + e[e.selectedIndex];

但我需要变量的“数组版本”,在我的服务器端php代码中。

Uncaught TypeError: Illegal invocation位于“jquery-1.7.2.min.js”文件中,该文件全部被压缩,因此我无法弄清楚代码的哪一部分引发了错误。

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

9 个答案:

答案 0 :(得分:131)

感谢与 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元素会导致麻烦。

答案 1 :(得分:39)

来自processData的jQuery文档:

  

processData 布尔值
  默认值:true
  默认情况下,作为对象传入数据选项的数据(技术上,不是字符串)将被处理并转换为查询字符串,适合默认内容类型“application / x-www-form-urlencoded” 。如果要发送DOMDocument或其他未处理的数据,请将此选项设置为false。

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

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

答案 2 :(得分:11)

  

我在JQuery文档中读到数据可以是一个数组(键值对)。   如果我提出错误,我会收到错误:

这是对象而不是数组:

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

你可能想要:

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

答案 3 :(得分:8)

我在发布FormData对象时遇到此错误,因为我没有正确设置ajax调用。下面的设置解决了我的问题。

Criteria c2 = session.createCriteria(Supplier.class);
c2.addOrder(Order.desc("name"));

答案 4 :(得分:4)

最近有同样的问题,通过添加traditional: true,

解决了

答案 5 :(得分: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。您的问题将得到解决。

答案 6 :(得分:-1)

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

答案 7 :(得分:-1)

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

答案 8 :(得分:-2)

试试这个:

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