jQuery:在ajax请求中出现“未捕获的TypeError:非法调用”-几个元素


112

我有两个选择元素,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”的文件,这是所有的压缩,所以我无法弄清楚哪些代码部分提出的错误。

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

Answers:


151

通过与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元素会引起麻烦。


正是我在做什么。忘了使用.val()
Usman Shaukat

我在变量中传递了选择html元素的选项。没注意到它不是纯文本,而是html。
斯特林·迪亚兹

46

从jQuery文档中获得processData

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

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

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


1
这是真的。如果我能在它之前看到它,就可以指出代码中的实际错误。谢谢,我会在答案中添加注释。
Nadir Sampaoli 2012年

25

发布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正文中添加了“ processData:false,contentType:false,cache:false”解决了我的问题。非常感谢。
CumaTekin

11

我在JQuery文档中已经读到,数据可以是一个数组(键值对)。我输入以下错误:

这是对象而不是数组:

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

您可能想要:

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

1
它不再引发该错误,但是似乎该数据没有传递到我的$_GET阵列服务器端(var_export($_GET)输出array ( 'undefined' => 'undefined', )
Nadir Sampaoli 2012年

@nadirs:尝试在$.ajax处理程序中定义方法类型:type:'get',
Sarfraz 2012年

@Sarfraz的结果是相同的。服务器端,data密钥应该在GET数组中找到,对吗?还是通过其他请求方法发送它们?
Nadir Sampaoli 2012年

@nadirs:类似的东西行得通data: {foo:'myfoo', bar:'mybar'},我想可能还有其他问题。
Sarfraz 2012年

@Sarfraz我是个白痴,我在发送HTML对象的e[e.selectedIndex]同时应该传递它的value e[e.selectedIndex].value。修复此缺陷后,对象表示法可以正常工作。
Nadir Sampaoli 2012年

7

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


我认为这实际上是有效的,但仅适用于现代浏览器
barnacle.m

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

4
一个好的答案不只是代码片段。它应该解释为什么这可以回答最初的问题,并提供相关文档的链接(如果有)。
JSTL

没有两个字段contentTypeprocessData,错误将继续显示。我添加了两个字段,它对我有用。我认为op试图指出两个重要领域。
Ekundayo祝福Funminiyi

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

7
如果您提供解释,答案会更有帮助。
乔恩·B

-2

试试这个:

            $.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.