JQuery: ‘Uncaught TypeError: Illegal invocation’ op verzoek van ajax – verschillende elementen

Ik heb twee geselecteerde elementen, A en B: wanneer de geselecteerde optie van A verandert, moeten de opties van B dienovereenkomstig worden bijgewerkt. Elk element in A impliceert veel elementen in B, het is een één-op-veel-relatie (A bevat naties, B zou steden in de gegeven natie moeten bevatten).

De functie do_ajaxmoet het asynchrone verzoek uitvoeren:

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

Om de opties van B bij te werken, heb ik een functieaanroep toegevoegd aan de gebeurtenis onChangevan A. Hier is de functie die wordt uitgevoerd wanneer de gebeurtenis onChange (van A) wordt geactiveerd:

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

}

Ik heb in JQuery-documentengelezen dat dataeen array kunnen zijn (sleutel waardeparen). Ik krijg de foutmelding als ik typ:

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

In plaats daarvan krijg ik die fout niet als mijn gegevens een tekenreeks zijn:

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

Maar ik heb de “array-versie” van de variabele nodig, in mijn server-side php-code.

De Uncaught TypeError: Illegal invocationbevindt zich in het bestand “jquery-1.7.2.min.js”, dat allemaal is gecomprimeerd, dus ik kon niet achterhalen welk deel van de code werd gegenereerd de fout.

Is er een instelling die ik in mijn code kan wijzigen zodat deze gegevens accepteert als een associatieve array?

Antwoord 1, autoriteit 100%

Dankzij het gesprek met Sarfrazhebben we de oplossing kunnen vinden.

Het probleem was dat ik een HTML-element doorgaf in plaats van de waarde ervan, wat eigenlijk is wat ik wilde doen (in feite heb ik in mijn php-code die waarde nodig als een externe sleutel voor het doorzoeken van mijn citiestabel en filter de juiste invoer).

Dus, in plaats van:

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

het zou moeten zijn:

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

Opmerking:controleer het antwoordvan Jason Kulatunga, het citeert het JQuery-document om uit te leggen waarom het doorgeven van een HTML-element veroorzaakte problemen.

Antwoord 2, autoriteit 30%

Van de jQuery-documenten voor processData:

processDataBooleaans
^{Standaard: waar}
Standaard worden gegevens die als een object aan de gegevensoptie worden doorgegeven (technisch gezien alles anders dan een tekenreeks) verwerkt en omgezet in een querytekenreeks, passend bij het standaard inhoudstype “application/x-www-form-urlencoded” . Als u een DOMDocument of andere niet-verwerkte gegevens wilt verzenden, stelt u deze optie in op false.

Bron: http://api.jquery.com/jquery.ajax

Het lijkt erop dat je processDatamoet gebruiken om je gegevens naar de server te sturen, of je php-script moet aanpassen om querystring-gecodeerde parameters te ondersteunen.

Antwoord 3, autoriteit 28%

Ik kreeg deze fout tijdens het posten van een FormData-object omdat ik de ajax-aanroep niet correct had ingesteld. De onderstaande setup heeft mijn probleem opgelost.

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

Antwoord 4, autoriteit 8%

Ik heb in JQuery-documenten gelezen dat gegevens een array kunnen zijn (sleutelwaardeparen).
Ik krijg de foutmelding als ik typ:

Dit is een object, geen array:

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

U wilt waarschijnlijk:

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

Antwoord 5, autoriteit 6%

Had onlangs hetzelfde probleem, opgelost door traditional: true,

. toe te voegen

Antwoord 6, autoriteit 2%

Volg de procedure om van dit probleem af te komen:

$.ajax({
   url: 'https://your-api-endpoint',
   type: 'post',
   data: new formData(this),
   processData: false,
   contentType: false,
   success: function(response) {
      console.log(response)
   }
})

Je moet processData: false en contentType: false gebruiken, deze twee regels. Uw probleem zal worden opgelost.

Antwoord 7

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

Antwoord 8

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

Antwoord 9

Probeer dit:

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