JQuery : 'Uncaught TypeError : Illegal invocation'at ajax request-여러 요소

두 가지 선택 요소 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의 옵션을 업데이트하기 위해 A의 onChange이벤트 에 함수 호출을 추가했습니다 . 다음은 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의 답변을 확인 하십시오. HTML 요소를 전달하는 것이 문제를 일으키는 이유를 설명하기 위해 JQuery 문서를 인용합니다.

에 대한 jQuery 문서에서 processData:

processData 부울
^{기본값 : true}
기본적으로 데이터 옵션에 개체 (기술적으로 문자열 이외의 모든 항목)로 전달 된 데이터는 처리되어 기본 콘텐츠 유형 "application / x-www"에 맞는 쿼리 문자열로 변환됩니다. -form-urlencoded ". DOMDocument 또는 기타 처리되지 않은 데이터를 보내려면이 옵션을 false로 설정하십시오.

출처 : http://api.jquery.com/jquery.ajax

processData데이터를 서버로 보내거나 쿼리 문자열 인코딩 매개 변수를 지원하도록 PHP 스크립트를 수정하는 데 사용해야 할 것 같습니다 .

ajax 호출을 올바르게 설정하지 않았기 때문에 FormData 객체를 게시하는 동안이 오류가 발생했습니다. 아래 설정으로 문제가 해결되었습니다.

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