JQuery: 'Uncaught TypeError: Illegal invocation' ตามคำขอ ajax - หลายองค์ประกอบ

ฉันมีองค์ประกอบที่เลือกสองรายการคือ A และ B: เมื่อตัวเลือกที่เลือกของ A เปลี่ยนไปตัวเลือกของ B จะต้องได้รับการอัปเดตตามนั้น แต่ละองค์ประกอบใน A แสดงถึงองค์ประกอบหลายอย่างใน B ซึ่งเป็นความสัมพันธ์แบบหนึ่งต่อกลุ่ม (A ประกอบด้วยประเทศ B ควรมีเมืองที่ตั้งอยู่ในประเทศที่กำหนด)

ฟังก์ชันdo_ajaxควรเรียกใช้คำขอแบบอะซิงโครนัส:

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

ในการอัปเดตตัวเลือกของ B ฉันได้เพิ่มการเรียกใช้ฟังก์ชันในonChangeเหตุการณ์ของ A นี่คือฟังก์ชันที่ทำงานเมื่อเหตุการณ์ onChange (of A) ถูกทริกเกอร์:

function my_onchange(e) // "e" is element "A"
{
    var sel_B = ... ; // get select element "B"

    // I skipped some code here
    // ...

    var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
    };
    do_ajax(city_sel, data, 'ajax_handler.php');
}

}

ฉันได้อ่านในเอกสาร JQueryซึ่งdataสามารถเป็นอาร์เรย์ (คู่ค่าคีย์) ฉันได้รับข้อผิดพลาดถ้าฉันใส่:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

แต่ฉันไม่ได้รับข้อผิดพลาดนั้นหากข้อมูลของฉันเป็นสตริง:

var data = 'mode=filter_city&id_A=' + e[e.selectedIndex];

แต่ฉันต้องการ "เวอร์ชันอาร์เรย์" ของตัวแปรในโค้ด php ฝั่งเซิร์ฟเวอร์ของฉัน

ไฟล์Uncaught TypeError: Illegal invocationนี้อยู่ในไฟล์ "jquery-1.7.2.min.js" ซึ่งถูกบีบอัดทั้งหมดดังนั้นฉันจึงไม่สามารถเข้าใจได้ว่าส่วนใดของโค้ดที่ทำให้เกิดข้อผิดพลาด

มีการตั้งค่าใดบ้างที่ฉันสามารถเปลี่ยนรหัสของฉันเพื่อให้รับข้อมูลเป็นอาร์เรย์เชื่อมโยงได้

ขอบคุณที่พูดคุยกับSarfrazเราสามารถหาวิธีแก้ปัญหาได้

ปัญหาคือฉันส่งองค์ประกอบ HTML แทนค่าของมันซึ่งจริงๆแล้วเป็นสิ่งที่ฉันต้องการทำ (อันที่จริงในโค้ด php ของฉันฉันต้องการค่านั้นเป็นคีย์ต่างประเทศสำหรับการสืบค้นcitiesตารางของฉันและกรองรายการที่ถูกต้อง)

ดังนั้นแทนที่จะ:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

มันควรจะเป็น:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex].value
};

หมายเหตุ:ตรวจสอบคำตอบของ Jason Kulatunga โดยอ้างถึง JQuery doc เพื่ออธิบายว่าเหตุใดการส่งองค์ประกอบ HTML จึงทำให้เกิดปัญหา

จากเอกสาร jQuery สำหรับprocessData:

processData Boolean
^{Default: true}
โดยค่าเริ่มต้นข้อมูลที่ส่งผ่านไปยังตัวเลือกข้อมูลเป็นอ็อบเจ็กต์ (ในทางเทคนิคสิ่งอื่นที่ไม่ใช่สตริง) จะถูกประมวลผลและเปลี่ยนเป็นสตริงการสืบค้นโดยเหมาะสมกับประเภทเนื้อหาเริ่มต้น "application / x-www -form-urlencoded ". หากคุณต้องการส่ง DOMDocument หรือข้อมูลอื่น ๆ ที่ไม่ได้รับการประมวลผลให้ตั้งค่าตัวเลือกนี้เป็น false

ที่มา: http://api.jquery.com/jquery.ajax

ดูเหมือนว่าคุณจะต้องใช้processDataเพื่อส่งข้อมูลของคุณไปยังเซิร์ฟเวอร์หรือแก้ไขสคริปต์ php ของคุณเพื่อรองรับพารามิเตอร์ที่เข้ารหัสสตริงการสืบค้น

ฉันได้รับข้อผิดพลาดนี้ขณะโพสต์วัตถุ FormData เนื่องจากฉันตั้งค่าการโทร ajax ไม่ถูกต้อง การตั้งค่าด้านล่างช่วยแก้ปัญหาของฉัน

var myformData = new FormData();        
myformData.append('leadid', $("#leadid").val());
myformData.append('date', $(this).val());
myformData.append('time', $(e.target).prev().val());

$.ajax({
    method: 'post',
    processData: false,
    contentType: false,
    cache: false,
    data: myformData,
    enctype: 'multipart/form-data',
    url: 'include/ajax.php',
    success: function (response) {
        $("#subform").html(response).delay(4000).hide(1); 
    }
});

ฉันได้อ่านในเอกสาร JQuery ว่าข้อมูลสามารถเป็นอาร์เรย์ (คู่ค่าคีย์) ฉันได้รับข้อผิดพลาดถ้าฉันใส่:

นี่คือวัตถุไม่ใช่อาร์เรย์:

var data = {
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
};

คุณอาจต้องการ:

var data = [{
        'mode': 'filter_city',
        'id_A': e[e.selectedIndex]
}];

มีปัญหาเดียวกันเมื่อเร็ว ๆ นี้แก้ไขได้โดยการเพิ่ม traditional: true,

function do_ajax(elem, mydata, filename)
{
    $.ajax({
        url: filename,
        context: elem,
        data: mydata,
        **contentType: false,
        processData: false**
        datatype: "html",
        success: function (data, textStatus, xhr) {
            elem.innerHTML = data;
        }
    });
}

$.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });

ลองสิ่งนี้:

            $.ajax({
                    url:"",
                    type: "POST",
                    data: new FormData($('#uploadDatabaseForm')[0]),
                    contentType:false,
                    cache: false,
                    processData:false,
                    success:function (msg) {}
                  });