Perché le mie variabili POST vengono visualizzate nella stringa URL?

Question

Ho implementato una funzione di postazione ajax basata su un clic del pulsante. Il codice è

$.ajax({ 
    type: "POST", 
    url: "includes/phpscripts?action=manage", 
    data: {location: loc, lat: latitude, lon: longitude, heading: head, filename: file}, 
    success: function(){ 
     $("#panoInfo").html("<div id='message'></div>"); 
     $("#message").html("Valid Submission"); 
    } 
}); 

Ho specificato il metodo POST poiché non desidero che le variabili siano visibili tramite l'URL. Tuttavia, lo sono.

mio URL di prova prima di distacco è

http://localhost/JMCTour/buildtour.php 

Successivamente

http://localhost/JMCTour/buildtour.php?filename=1-prefix_blended_fused.jpg&location=Start+of+Tour&lat=43.682211&long=-70.450705&heading=100&submit=Save 

Perché?

Answer 1

Dal docs for jQuery.ajax (sottolineatura mia):

dati

dati da inviare al server. Viene convertito in una stringa di query, se non già una stringa. Viene aggiunto all'URL per le richieste GET. Vedere l'opzione processData per impedire questa elaborazione automatica. L'oggetto deve essere coppia chiave/valore. Se value è una matrice, jQuery serializza più valori con lo stesso tasto in base al valore dell'impostazione tradizionale (descritta di seguito).

e quindi:

processDataBoolean

Predefinito: true

Per impostazione predefinita, i dati passati per l'opzione dei dati come un oggetto (tecnicamente, qualcosa di diverso da una stringa) verrà elaborato e trasformato in una stringa di query, adattandosi al tipo di contenuto predefinito "application/x-www-form-urlencoded". Se si desidera inviare un DOMDocument o altri dati non elaborati, impostare questa opzione su false.

Answer 2

Qui sto facendo alcune assunzioni a causa della mancanza di informazioni nella domanda.

Più che probabile il modulo sembra qualcosa di simile:

<form> 
    <input type="text" name="lon" /> 
    <input type="text" name="lat" /> 
    <input type="text" name="heading" /> 
    <input type="file" name="image" /> 

    <input type="button" id="submit" value="Submit" /> 
</form> 

Immediatamente abbiamo un problema, il vostro file di input. I file non possono essere inviati tramite ajax usando i metodi ajax di jQuery senza includere plugin aggiuntivi che lo gestiscano correttamente dietro le quinte o scrivendo il tuo codice per inviare invece a un iframe nascosto o qualche altro metodo (html5? Flash?).

Ignorando l'input del file, ecco dove si trova il tuo problema originale.

$("#submit").click(function(){ 
    $.ajax(...); 
}); 

Ho omesso le opzioni Ajax perché sono irrilevanti. Il problema è che, poiché il pulsante nel modulo è l'ultimo input nel modulo e non c'è un pulsante di invio, si comporterà come un pulsante di invio e invierà il modulo a meno che non si impedisca tale azione predefinita. Se non si impedisce l'azione predefinita, il modulo verrà inviato con il tipo predefinito di "GET" poiché non è stato impostato un tipo nel modulo.

Per evitare che l'azione predefinita dell'evento click, o return false oppure usa event.preventDefault()

$("#submit").click(function(event){ 
    event.preventDefault(); 
    $.ajax(...); 
}); 

Risolvere il problema di input file è probabilmente già risposto in molte altre domande in modo.

Answer 3

Assicurarsi che il tag form ha method='POST'

<form method='POST'> 
... 
</form>