Warum werden meine POST-Variablen in der URL-Zeichenfolge angezeigt?

Question

Ich habe eine Ajax Post-Funktion basierend auf einem Knopfklick implementiert. Der Code ist

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

ich die POST-Methode festgelegt, da will ich nicht die Variablen über die URL sichtbar sein. Sie sind es jedoch.

Mein Test-URL vor der Veröffentlichung ist

http://localhost/JMCTour/buildtour.php 

Danach

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 

Warum?

Answer 1

Vom docs for jQuery.ajax (Hervorhebung von mir):

Daten

Daten an an den Server gesendet werden. Es wird in eine Abfragezeichenfolge konvertiert, wenn nicht bereits eine Zeichenfolge. Es wird an die URL für GET-Anfragen angehängt. Siehe Option processData, um diese automatische Verarbeitung zu verhindern. Objekt muss Schlüssel/Wert-Paare sein. Wenn value ein Array ist, serialisiert jQuery mehrere Werte mit demselben Schlüssel basierend auf dem Wert der traditionellen Einstellung (siehe unten).

und deshalb:

processDataBoolean

Standard: true

standardmäßig übergebenen Daten in die Datenoption als Objekt (technisch, etwas anderes als eine Zeichenfolge) wird verarbeitet und in eine Query-Zeichenkette umgewandelt, passend zum Standard-Inhaltstyp "application/x-www-form-urlencoded". Wenn Sie ein DOMDocument oder andere nicht verarbeitete Daten senden möchten, setzen Sie diese Option auf false.

Answer 2

Ich mache hier eine Reihe von Annahmen wegen fehlender Informationen in der Frage.

Mehr als wahrscheinlich Ihre Form sieht wie folgt aus etwas:

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

Sofort haben wir ein Problem, Ihre Datei-Eingabe. Dateien können nicht über Ajax mit den Ajax-Methoden von jQuery gesendet werden, ohne dass zusätzliche Plugins einbezogen werden, die hinter den Kulissen korrekt funktionieren, oder wenn Sie Ihren Code schreiben, anstatt ihn an einen versteckten Iframe oder eine andere Methode zu senden (html5? Flash?).

Ignorieren der Dateieingabe, hier ist, wo Ihr ursprüngliches Problem ist.

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

verließ ich die Ajax-Optionen, weil sie nicht relevant sind. Das Problem ist, dass, da die Schaltfläche in Ihrem Formular die letzte Eingabe im Formular ist und keine Schaltfläche zum Senden vorhanden ist, diese wie eine Übergabeschaltfläche agiert und das Formular absendet, sofern Sie diese Standardaktion nicht verhindern. Wenn Sie diese Standardaktion nicht verhindern, wird das Formular mit dem Standardtyp "GET" gesendet, da Sie in Ihrem Formular keinen Typ festgelegt haben.

Um die Standardaktion des Click-Ereignis zu verhindern, entweder false zurück, oder event.preventDefault()

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

Befestigung der Dateieingabe Problem wahrscheinlich in mehreren anderen SO Fragen beantwortet nutzen bereits.

Answer 3

Achten Sie darauf, Ihr Formular-Tag method='POST'

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