jQuery-非法调用


108

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 (!/^\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;
});

如果我data从ajax调用中删除,它可以正常工作..有什么建议吗?

谢谢!


尝试from从数据中删除。也许这与jQuery的把冲突
gopi1410

6
您意识到您要推送jQuery对象,而不是JSON吗?
asawyer

18
当我忘记某些jQuery对象上的.val()时,经常会发生在我身上……
userfuser 2014年

Answers:


118

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

尝试:

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

还要注意以下行:

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

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


2
谢谢,忘了我已经加载了对象而不是字符串,通常我会加载字符串:)
yoda 2012年

3
这种方法对我有帮助。我将变量命名为,$from = $('#from');这可以帮助我记住它代表一个jQuery对象,这有助于避免在字符串对象上调用方法,或者避免在jQuery对象上尝试使用.toString()或类似方法操作字符串。
timbrown 2013年

.val()缺少部分,所以它没有传递值。
SharpC 2015年

109

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

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

8
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.
BOTJr。

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


13

如果要使用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');
            }
        }
    });
});

这两个选项有什么用,您能解释一下吗?
rahim.nagori

2

就我而言,我只是改变了

注意:这是在Django的情况下,因此我添加了csrftoken。就您而言,您可能不需要它。

添加了contentType: falseprocessData: 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) => {

    }
})

而且有效。


2

就我而言,我还没有定义要传递给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');
    }
)}

0

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

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

请参阅此答案以获取更多有关为什么可能会出现问题的信息:为什么某些函数调用在JavaScript中被称为“非法调用”?

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

解决方法是:

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

0

在我使用匿名函数的情况下(使用webpack 4),我将其用作回调。

我不得不使用window.$.ajax()而不是$.ajax()尽管:

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

0

这也是一个原因:如果您构建了jQuery集合(通过.map()或类似方法),则不应在.ajax()的数据中使用此集合。因为它仍然是jQuery对象,所以不是普通的JavaScript Array。您应该在和处使用.get()来获取纯js数组,并应在.ajax()的数据设置上使用它。

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.