jQuery - 非法调用

问题描述 投票:0回答:11

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

如果我从ajax调用中删除

data
,它就会起作用! ..有什么建议吗?

谢谢!

jquery ajax post
11个回答
164
投票

尝试在ajax设置中设置processData:false,如下所示

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

127
投票

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

尝试:

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

还请注意以下几行:

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

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


23
投票

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

,也可能会发生这种情况
var layout = {};
$.ajax({
  ...
  data: {
    layout: laoyut // notice misspelled variable name
  },
  ...
});

23
投票

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

6
投票

就我而言,我只是改变了

注意: 这是 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) => {

    }
})

并且成功了。


5
投票

在我的例子中,我没有定义在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');
    }
)}

4
投票

为我工作。 处理数据:假, 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
        }
 });

1
投票

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


1
投票

这是一些工作示例代码:

let formData = new FormData($("#formId")[0]);
 
$.ajax({
  url: "/api/v1/save-data",
  type: "POST",
  enctype: "multipart/form-data",
  dataType: "json",
  data: formData,
  success: function(data) {
    console.log(data);
  },
  cache: false,
  contentType: false,
  processData: false,
  error: function() {
    console.log("Error");
  }
});

1
投票

这里的问题是您将输入对象作为数据传递给 ajax,如下所示:

$('form[name="twp-tool-distance-form"] input[name="from"]')

所以你必须像这样传递输入值:

$('form[name="twp-tool-distance-form"] input[name="from"]').val()

0
投票

我的问题与

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

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

有关为什么这可能成为问题的更多信息,请参阅此答案:为什么某些函数调用在 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
});
© www.soinside.com 2019 - 2024. All rights reserved.