jQuery - การร้องขอที่ผิดกฎหมาย

jQuery v1.7.2

ฉันมี funcion นี้ที่ทำให้ฉันเกิดข้อผิดพลาดต่อไปนี้ขณะดำเนินการ:

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 มันใช้งานได้ .. มีข้อเสนอแนะใด ๆ ?

ขอบคุณ!

ฉันคิดว่าคุณต้องมีสตริงเป็นค่าข้อมูล มีแนวโน้มว่าจะมีบางอย่างภายใน jQuery ที่ไม่ได้เข้ารหัส / ซีเรียลไลซ์อย่างถูกต้องของ To & From Objects

ลอง:

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

โปรดสังเกตในบรรทัด:

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

คุณไม่จำเป็นต้องใช้ jQuery wrapper เนื่องจาก To & From เป็นวัตถุ jQuery อยู่แล้ว

ลองตั้งค่าprocessData: falseในการตั้งค่า ajax เช่นนี้

$.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เป็นการerrorโทรกลับ

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

ดูคำตอบนี้สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสาเหตุที่อาจเป็นปัญหา: เหตุใดการเรียกฟังก์ชันบางอย่างจึงเรียกว่า "การเรียกใช้ที่ผิดกฎหมาย" ใน JavaScript

วิธีที่ฉันสามารถค้นพบสิ่งนี้คือการเพิ่ม a 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 = $;

นี่ก็เป็นสาเหตุเช่นกัน: หากคุณสร้างคอลเลกชัน jQuery (ผ่าน. map () หรือสิ่งที่คล้ายกัน) คุณไม่ควรใช้คอลเล็กชันนี้ในข้อมูลของ. jQuery เพราะมันยังคงเป็นวัตถุ jQueryไม่ธรรมดาอาร์เรย์ JavaScript คุณควรใช้. get () ที่และเพื่อรับอาร์เรย์ js ธรรมดาและควรใช้กับการตั้งค่าข้อมูลบน. js ()