Почему переменные POST отображаются в строке URL?

Question

Я реализовал функцию post ajax, основанную на нажатии кнопки. Код

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

Я определил метод POST, так как я не хочу, чтобы переменные отображались через URL-адрес. Однако они есть.

Мой тестовый URL, прежде чем отправлять это

http://localhost/JMCTour/buildtour.php 

После

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 

Почему?

Answer 1

Из docs for jQuery.ajax (курсив мой):

данные

данные для отправки на сервер. Он преобразуется в строку запроса, если не является уже строкой. Он добавляется к URL-адресу для запросов GET. См. Параметр processData для предотвращения этой автоматической обработки. Объектом должны быть пары «ключ/значение». Если значением является массив, jQuery сериализует несколько значений с одним и тем же ключом на основе значения традиционной настройки (описано ниже).

и поэтому:

processDataBoolean

По умолчанию: истинно

По умолчанию, данные, передаваемые в к выбору данных в качестве объекта (технически, ничего, кроме строки) будет обрабатываться и преобразовываться в строку запроса, соответствующую стандартным типам контента «application/x-www-form-urlencoded». Если вы хотите отправить DOMDocument или другие необработанные данные, установите для этого параметра значение false.

Answer 2

Я делаю здесь несколько предположений из-за отсутствия информации в вопросе.

Более вероятно, ваша форма будет выглядеть примерно так:

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

Сразу у нас есть проблемы, ввод файла. Файлы не могут быть отправлены через ajax с использованием jQuery ajax-методов без включения дополнительных плагинов, которые правильно обрабатывают его за кулисами или записывают ваш код, вместо этого отправляют скрытый iframe или какой-либо другой метод (html5? Flash?).

Игнорирование ввода файла, вот где ваша оригинальная проблема.

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

Я отказался от вариантов ajax, потому что они неактуальны. Проблема в том, что поскольку кнопка в вашей форме является последним в форме и не существует кнопки отправки, она будет действовать как кнопка отправки и отправит форму, если вы не предотвратите это действие по умолчанию. Если вы не предотвратите это действие по умолчанию, форма будет отправлена ​​с типом «GET» по умолчанию, поскольку вы не указали тип в своей форме.

Чтобы предотвратить действие по умолчанию события щелчка, либо возвращать ложь, или использовать event.preventDefault()

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

Решение проблемы входного файла, вероятно, уже ответил на ряд других вопросов, SO.

Answer 3

Убедитесь, что форма тега method='POST'

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