¿Por qué mis variables POST aparecen en la cadena URL?

Question

Implementé una función de publicación ajax basada en un clic de botón. El código es

$.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"); 
    } 
}); 

Especifiqué el método POST ya que no quiero que las variables sean visibles a través de la URL. Sin embargo, lo son.

Mi URL de prueba antes de la publicación es

http://localhost/JMCTour/buildtour.php 

Después

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 

¿Por qué?

Answer 1

Desde el (el énfasis es mío) docs for jQuery.ajax:

datos

datos a enviar al servidor. Se convierte a una cadena de consulta, si no ya una cadena. Se adjunta a la url para solicitudes GET. Consulte la opción processData para evitar este procesamiento automático. El objeto debe ser pares clave/valor. Si el valor es una matriz, jQuery serializa varios valores con la misma clave en función del valor de la configuración tradicional (que se describe a continuación).

y por lo tanto:

processDataBoolean

por defecto: true

Por defecto, los datos pasados ​​a la opción de datos como un objeto (técnicamente, que no sea una cadena nada) se procesará y transformará en una cadena de consulta, que se ajusta al tipo de contenido predeterminado "application/x-www-form-urlencoded". Si desea enviar un DOMDocument u otros datos no procesados, establezca esta opción en falso.

Answer 2

Estoy haciendo bastantes suposiciones aquí debido a la falta de información en la pregunta.

Lo más probable es que su forma se ve algo como esto:

<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> 

Inmediatamente tenemos un problema, el archivo de entrada. Los archivos no pueden enviarse a través de ajax utilizando los métodos ajax de jQuery sin incluir complementos adicionales que lo manejen correctamente detrás de las escenas o escribir su código para enviarlos a un iframe oculto u otro método (html5? Flash?).

Ignorando la entrada del archivo, aquí es donde está su problema original.

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

Olvidé las opciones de ajax porque son irrelevantes. El problema es que, dado que el botón en su formulario es la última entrada del formulario y no hay un botón de envío, actuará como un botón de envío y enviará el formulario a menos que evite esa acción predeterminada. Si no evita esa acción predeterminada, el formulario se enviará con el tipo predeterminado "GET" ya que no estableció un tipo en su formulario.

Para evitar que la acción predeterminada del evento clic, ya sea return false o utiliza event.preventDefault()

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

Arreglar el problema de entrada de archivo es, probablemente, ya ha respondido en varias otras preguntas SO.

Answer 3

Asegúrese de que su etiqueta de formulario tiene method='POST'

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