jQuery - 非法调用

jQuery - Illegal invocation

提问by yoda

jQuery v1.7.2

jQuery v1.7.2

I have this funcion that is giving me the following error while executing :

我有这个功能，在执行时给我以下错误：

Uncaught TypeError: Illegal invocation

Here's the function :

这是功能：

$('form[name="twp-tool-distance-form"]').on('submit', function(e) {
    e.preventDefault();

    var from = $('form[name="twp-tool-distance-form"] input[name="from"]');
    var to = $('form[name="twp-tool-distance-form"] input[name="to"]');
    var unit = $('form[name="twp-tool-distance-form"] input[name="unit"]');
    var speed = game.unit.speed($(unit).val());

    if (!/^\d{3}\|\d{3}$/.test($(from).val()))
    {
        $(from).css('border-color', 'red');
        return false;
    }

    if (!/^\d{3}\|\d{3}$/.test($(to).val()))
    {
        $(to).css('border-color', 'red');
        return false;
    }

    var data = {
        from : from,
        to : to,
        speed : speed
    };

    $.ajax({
        url : base_url+'index.php',
        type: 'POST',
        dataType: 'json',
        data: data,
        cache : false
    }).done(function(response) {
        alert(response);
    });

    return false;
});

If I remove datafrom ajax call, it works .. any suggestions?

如果我data从 ajax 调用中删除，它会起作用.. 有什么建议吗？

Thanks!

谢谢！

回答by LessQuesar

I think you need to have strings as the data values. It's likely something internally within jQuery that isn't encoding/serializing correctly the To & From Objects.

我认为您需要将字符串作为数据值。很可能是 jQuery 内部的某些东西没有正确编码/序列化 To & From 对象。

Try:

尝试：

var data = {
    from : from.val(),
    to : to.val(),
    speed : speed
};

Notice also on the lines:

还请注意以下内容：

$(from).css(...
$(to).css(

You don't need the jQuery wrapper as To & From are already jQuery objects.

您不需要 jQuery 包装器，因为 To & From 已经是 jQuery 对象。

回答by Justo

Try to set processData: falsein ajax settings like this

尝试在这样的 ajax 设置中设置processData: false

$.ajax({
    url : base_url+'index.php',
    type: 'POST',
    dataType: 'json',
    data: data,
    cache : false,
    processData: false
}).done(function(response) {
    alert(response);
});

回答by Ivan Ivani?

Just for the record it can also happen if you try to use undeclared variable in data like

只是为了记录，如果您尝试在数据中使用未声明的变量，也会发生这种情况，例如

var layout = {};
$.ajax({
  ...
  data: {
    layout: laoyut // notice misspelled variable name
  },
  ...
});

回答by Bablu Ahmed

If you want to submit a form using Javascript FormDataAPI with uploading files you need to set below two options:

如果您想使用 Javascript FormDataAPI提交带有上传文件的表单，您需要设置以下两个选项：

processData: false,
contentType: false

You can try as follows:

您可以尝试如下：

//Ajax Form Submission
$(document).on("click", ".afs", function (e) {
    e.preventDefault();
    e.stopPropagation();
    var thisBtn = $(this);
    var thisForm = thisBtn.closest("form");
    var formData = new FormData(thisForm[0]);
    //var formData = thisForm.serializeArray();

    $.ajax({
        type: "POST",
        url: "<?=base_url();?>assignment/createAssignment",
        data: formData,
        processData: false,
        contentType: false,
        success:function(data){
            if(data=='yes')
            {
                alert('Success! Record inserted successfully');
            }
            else if(data=='no')
            {
                alert('Error! Record not inserted successfully')
            }
            else
            {
                alert('Error! Try again');
            }
        }
    });
});

回答by hygull

In my case, I just changed

就我而言，我只是改变了

Note:This is in case of Django, so I added csrftoken. In your case, you may not need it.

注意：这是在 Django 的情况下，所以我添加了csrftoken. 在您的情况下，您可能不需要它。

Added contentType: false, processData: false

Commented out "Content-Type": "application/json"

添加contentType: false，processData: false

注释掉 "Content-Type": "application/json"

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    headers: {
        "X-CSRFToken": csrftoken,
        "Content-Type": "application/json"
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

to

到

$.ajax({
    url: location.pathname, 
    type: "POST",
    crossDomain: true,
    dataType: "json",
    contentType: false,
    processData: false,
    headers: {
        "X-CSRFToken": csrftoken
        // "Content-Type": "application/json",
    },
    data:formData,
    success: (response, textStatus, jQxhr) => {

    },
    error: (jQxhr, textStatus, errorThrown) => {

    }
})

and it worked.

它奏效了。

回答by Rajesh Kharatmol

In My case I have't define all variables which I am passing to data in ajax.

在我的情况下，我没有定义我在 ajax 中传递给数据的所有变量。

var page = 1;

$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

I have just defined variable var search_candidate = "candidate name";and its working.

我刚刚定义了变量var search_candidate = "candidate name";及其工作。

var page = 1;
var search_candidate = "candidate name"; // defined
$.ajax({
    url: 'your_url',
    type: "post",
    data: { 'page' : page, 'search_candidate' : search_candidate }
    success: function(result){
        alert('function called');
    }
)}

回答by zanderwar

In my case (using webpack 4) within an anonymous function, that I was using as a callback.

就我而言（使用 webpack 4）在匿名函数中，我将其用作回调。

I had to use window.$.ajax()instead of $.ajax()despite having:

尽管有window.$.ajax()，$.ajax()但我不得不使用而不是：

import $ from 'jquery';
window.$ = window.jQuery = $;

回答by Burak TARHANLI

Also this is a cause too: If you built a jQuery collection (via .map() or something similar) then you shouldn't use this collection in .ajax()'s data. Because it's still a jQuery object, not plain JavaScript Array. You should use .get() at the and to get plain js array and should use it on the data setting on .ajax().

这也是一个原因：如果您构建了一个 jQuery 集合（通过 .map() 或类似的东西），那么您不应该在 .ajax() 的数据中使用这个集合。因为它仍然是一个jQuery 对象，而不是普通的JavaScript Array。您应该使用 .get() 在 和 获取纯 js 数组，并且应该在 .ajax() 上的数据设置上使用它。

回答by ubershmekel

My problem was unrelated to processData. It was because I sent a function that cannot be called later with applybecause it did not have enough arguments. Specifically I shouldn't have used alertas the errorcallback.

我的问题与processData. 那是因为我发送了一个以后无法调用的函数，apply因为它没有足够的参数。具体来说，我不应该使用alert的error回调。

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    processData: false,
    error: alert
});

See this answer for more information on why that can be a problem: Why are certain function calls termed "illegal invocations" in JavaScript?

有关为什么会出现问题的更多信息，请参阅此答案：为什么某些函数调用在 JavaScript 中被称为“非法调用”？

The way I was able to discover this was by adding a console.log(list[ firingIndex ])to jQuery so I could track what it was firing.

我能够发现这一点的方法是console.log(list[ firingIndex ])向 jQuery添加 a以便我可以跟踪它正在触发的内容。

This was the fix:

这是修复：

function myError(jqx, textStatus, errStr) {
    alert(errStr);
}

$.ajax({
    url: csvApi,
    success: parseCsvs,
    dataType: "json",
    timeout: 5000,
    error: myError // Note that passing `alert` instead can cause a "jquery.js:3189 Uncaught TypeError: Illegal invocation" sometimes
});