jQuery - 非法调用

Posted 2023-05-08

【中文标题】jQuery - 非法调用

【英文标题】：jQuery - Illegal invocation

【发布时间】：2012-05-06 15:57:17

【问题描述】：

jQuery v1.7.2

我有这个函数在执行时给我以下错误：

Uncaught TypeError: Illegal invocation

函数如下：

$('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 (!/^\d3\|\d3$/.test($(from).val()))
    
        $(from).css('border-color', 'red');
        return false;
    

    if (!/^\d3\|\d3$/.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;
);

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

谢谢！

【问题讨论】：

尝试从数据中删除from。也许它与 jquery 的 from

冲突

您意识到您尝试推送 jQuery 对象，而不是 JSON 对吧？

当我忘记某些 jQuery 对象上的 .val() 时，我经常会发生这种情况...

【参考方案1】：

尝试在这样的 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 default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

您可能还需要添加 contentType: false 。我在上传文件时这样做了。见***.com/questions/21044798/…

【参考方案2】：

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

试试：

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

请注意：

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

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

【讨论】：

谢谢，忘了我加载的是对象而不是字符串，通常我加载的是字符串:)

这种方法对我有帮助。我将我的变量命名为 $from = $('#from'); 这有助于我记住它表示一个 jQuery 对象，这有助于避免在字符串上调用方法或尝试使用 .toString() 或在它是 jQuery 对象时操作字符串。

我缺少 .val() 部分，所以它没有传递值。

【参考方案3】：

仅作记录，如果您尝试在数据中使用未声明的变量，例如

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

【讨论】：

谢谢！那完全是我被阻止的地方。

【参考方案4】：

如果您想使用 javascript FormData API 提交表单并上传文件，您需要设置以下两个选项：

processData: false,
contentType: false

你可以尝试如下：

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

【讨论】：

这两个选项的作用，你能解释一下吗？

【参考方案5】：

就我而言，我只是改变了

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

添加了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) => 

    
)

到

$.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) => 

    
)

它成功了。

【参考方案6】：

在我的例子中，我没有定义所有要传递给 ajax 数据的变量。

var page = 1;

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

我刚刚定义了变量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');
    
)

【参考方案7】：

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

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

有关为什么这可能是一个问题的更多信息，请参阅此答案：Why are certain function calls termed "illegal invocations" in JavaScript?

我发现这一点的方法是在 jQuery 中添加 console.log(list[ firingIndex ])，这样我就可以跟踪它触发了什么。

这是修复：

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

【参考方案8】：

在我的情况下（使用 webpack 4）在一个匿名函数中，我将其用作回调。

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

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

【参考方案9】：

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

【参考方案10】：

为我工作。 处理数据：假， contentType: false， 是工作所必需的。

 var formData = new FormData($('#author_post')[0]);
 formData.append('t','author-add');
 $.ajax(
        type: 'POST',
        url: 'url-here',
        cache: false,
        processData: false,
        contentType: false,
        data:formData,
        success: function(response) 
           //success code
        
 );