jQuery-잘못된 호출

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

내가 dataajax 호출에서 제거 하면 작동합니다 .. 어떤 제안?

감사!

데이터 값으로 문자열이 필요하다고 생각합니다. To & From Objects를 올바르게 인코딩 / 직렬화하지 않는 jQuery 내부의 무언가 일 수 있습니다.

시험:

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

라인에도주의하십시오 :

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

To & From이 이미 jQuery 객체이므로 jQuery 래퍼가 필요하지 않습니다.

설정하려고 processData를 : 거짓을 같은 아약스 설정에서

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

기록을 위해 다음과 같은 데이터에서 선언되지 않은 변수를 사용하려고 할 때도 발생할 수 있습니다.

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

파일 업로드와 함께 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');
            }
        }
    });
});

제 경우에는 그냥 변 했어요

참고 : 이것은 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) => {

    }
})

그리고 그것은 작동했습니다.

제 경우에는 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');
    }
)}

내 문제는 processData. apply인수가 충분하지 않아 나중에 호출 할 수없는 함수를 보냈기 때문입니다. 특히 내가 사용하지 말았어야 alert은 AS error콜백.

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

필자의 경우 (webpack 4 사용) 익명 함수 내에서 콜백으로 사용했습니다.

나는 다음을 가지고 있음에도 불구하고 window.$.ajax()대신 사용해야 했습니다 $.ajax().

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

또한 이것은 원인이기도합니다. (.map () 또는 이와 유사한 것을 통해) jQuery 컬렉션을 구축했다면 .ajax ()의 데이터에서이 컬렉션을 사용해서는 안됩니다. 일반 JavaScript Array가 아니라 여전히 jQuery 객체 이기 때문 입니다. 일반 js 배열을 얻으려면 .get ()을 사용해야하며 .ajax ()의 데이터 설정에 사용해야합니다.