Why are POST variables displayed in the URL bar?

Question

I implemented a post ajax function based on a button click. The code

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

I set the POST method since I do not want the variables to be displayed through the URL. However, they are.

My test URL before posting

 http://localhost/JMCTour/buildtour.php 

Further

 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 

Why?

Answer 1

From the docs for jQuery.ajax (highlighted by me):

<strong> data

Data to send to the server. It is converted to a query string if it is not already a string. It is added to the URL for GET requests. See the processData parameter to prevent this automatic processing. The object must be Key / Value pairs. If the value is an array, jQuery serializes multiple values ​​with the same key based on the value of the traditional setting (described below).

and therefore:

processDataBoolean

Default: true

By default, the data passed to the data parameter as an object (technically, nothing but a string) will be processed and converted to a query string, adapting to the standard content types application / x-www-form -urlencoded. "If you want to send a DOMDocument or other raw data, set this parameter to false.

Answer 2

Make sure your form tag has method='POST'

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

Answer 3

I make a lot of assumptions here due to the lack of information in the question.

Most likely your form looks something like this:

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

Immediately there is a problem with entering the file. Files cannot be sent via ajax using jQuery ajax methods without including additional plugins that correctly process it behind the scenes or write your code, instead send a hidden iframe or some other method (html5? Flash?).

Ignoring file input here is where your original problem is.

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

I did not use ajax options because they do not matter. The problem is that since the button in your form is the last on the form and there is no submit button, it will act like the submit button and submit the form if you do not prevent this action by default. If you do not prevent this action by default, the form will be submitted with the default type "GET", since you did not specify the type in your form.

To prevent the default action of the click event, either return false or use event.preventDefault()

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

Resolving file input problems probably already answered a few other SO questions.