jQuery - Lời gọi bất hợp pháp

jQuery v1.7.2

Tôi có chức năng này gây ra lỗi sau khi thực thi:

Uncaught TypeError: Illegal invocation

Đây là chức năng:

$('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;
});

Nếu tôi xóa datakhỏi cuộc gọi ajax, nó hoạt động .. bất kỳ đề xuất nào?

Cảm ơn!

Tôi nghĩ bạn cần phải có chuỗi làm giá trị dữ liệu. Có thể một cái gì đó bên trong jQuery không mã hóa / tuần tự hóa chính xác Đối tượng Đến & Từ.

Thử:

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

Cũng lưu ý trên các dòng:

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

Bạn không cần trình bao bọc jQuery vì To & From đã là các đối tượng jQuery.

Cố gắng đặt processData: false trong cài đặt ajax như thế này

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

Chỉ đối với bản ghi, điều đó cũng có thể xảy ra nếu bạn cố gắng sử dụng biến không được khai báo trong dữ liệu như

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

Nếu bạn muốn gửi biểu mẫu bằng API FormData Javascript với các tệp đang tải lên, bạn cần đặt hai tùy chọn bên dưới:

processData: false,
contentType: false

Bạn có thể thử như sau:

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

Trong trường hợp của tôi, tôi vừa thay đổi

Lưu ý: Đây là trường hợp của Django, vì vậy tôi đã thêm csrftoken. Trong trường hợp của bạn, bạn có thể không cần nó.

Đã thêm contentType: false,processData: false

Bình luận "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) => {

    }
})

đến

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

    }
})

va no đa hoạt động.

Trong trường hợp của tôi, tôi chưa xác định tất cả các biến mà tôi đang chuyển sang dữ liệu trong ajax.

var page = 1;

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

Tôi vừa xác định biến var search_candidate = "candidate name";và nó hoạt động.

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

Vấn đề của tôi không liên quan đến processData. Đó là bởi vì tôi đã gửi một hàm không thể được gọi sau này với applyvì nó không có đủ đối số. Cụ thể là tôi không nên sử dụng alertlàm cuộc errorgọi lại.

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

Hãy xem câu trả lời này để biết thêm thông tin về lý do tại sao điều đó có thể là vấn đề: Tại sao một số lệnh gọi hàm nhất định được gọi là "lệnh gọi bất hợp pháp" trong JavaScript?

Cách tôi có thể phát hiện ra điều này là thêm một console.log(list[ firingIndex ])vào jQuery để tôi có thể theo dõi những gì nó đang kích hoạt.

Đây là bản sửa lỗi:

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

Trong trường hợp của tôi (sử dụng webpack 4) trong một chức năng ẩn danh, mà tôi đang sử dụng làm lệnh gọi lại.

Tôi đã phải sử dụng window.$.ajax()thay vì $.ajax()mặc dù có:

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

Ngoài ra, đây cũng là một nguyên nhân: Nếu bạn đã tạo một bộ sưu tập jQuery (thông qua .map () hoặc một cái gì đó tương tự) thì bạn không nên sử dụng bộ sưu tập này trong dữ liệu của .ajax (). Bởi vì nó vẫn là một đối tượng jQuery , không phải là Mảng JavaScript đơn thuần . Bạn nên sử dụng .get () tại và để lấy mảng js thuần túy và nên sử dụng nó trên cài đặt dữ liệu trên .ajax ().