JQuery: 'Uncaught TypeError: invocation illegale' su richiesta jax quando il parametro data è array

Question

Ho due elementi select, A e B: quando l'opzione selezionata di A cambia, le opzioni di B devono essere aggiornate di conseguenza. Ogni elemento in A implica molti elementi in B, è una relazione uno-a-molti (A contiene nazioni, B dovrebbe contenere città situate nella nazione data).

La funzione do_ajax dovrebbe eseguire la richiesta asincrona:

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

Al fine di aggiornare le opzioni di B. Ho una chiamata di funzione nel caso di un onChange. Qui è la funzione che viene eseguito quando viene attivato evento onChange (di 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'); 
} 

}

ho letto in JQuery docs che data può essere un array (coppie di valori chiave). Ottengo l'errore se metto:

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

Invece, non ottengo questo errore se il mio dati è una stringa:

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

Ma ho bisogno la "versione allineamento" della variabile, nel mio codice php lato server.

Il Uncaught TypeError: Illegal invocation si trova nel file "jquery-1.7.2.min.js", che è tutto compresso, quindi non ho potuto capire quale parte di codice ha generato l'errore.

C'è qualche impostazione che posso modificare nel mio codice in modo che accetti i dati come array associativo?

Answer 1

Grazie alla chiacchierata con Sarfraz abbiamo potuto capire la soluzione.

Il problema era che stavo passando un elemento HTML invece del suo valore, che è in realtà quello che volevo fare (infatti nel mio codice php ho bisogno di quel valore come chiave esterna per interrogare la mia tabella cities e il filtro corretto inserimenti).

Così, invece di:

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

dovrebbe essere:

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

Nota: di answer controllo Jason Kulatunga, cita JQuery doc per spiegare i problemi perché il superamento di un elemento HTML è stato causando .

Answer 2

I've read in JQuery docs that data can be an array (key value pairs). I get the error if I put:

Questo è oggetto non un array:

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

Probabilmente si desidera:

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

Answer 3

Dalla documentazione jQuery per processData:

processData Boolean
^{Default: true}
By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

sembra che si sta andando a dover utilizzare processData per inviare il tuo d ata sul server o modifica lo script php per supportare i parametri codificati di querystring.

Answer 4

Try This:

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

Answer 5

avuto lo stesso problema di recente, risolto con l'aggiunta traditional: true,

Answer 6

stavo ottenendo questo errore durante la pubblicazione di un oggetto formdata perché non stavo installando la chiamata AJAX in modo corretto. L'installazione di seguito ha risolto il problema.

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

Answer 7

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