Pro jQuery
Адам Фриман
Делаем POST запрос
Можно установить тип желаемого HTTP запроса, если использовать настройку type
. Запросом по умолчанию является GET
, как показано в предыдущем примере. В листинге 15-4 вы увидите, как при помощи метода ajax
создать POST
запрос и отправить данные из формы на сервер.
Листинг 15-4: СозданиеPOST
запроса при помощи методаajax
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "mydata.json",
success: function (data) {
var template = $('#flowerTmpl');
template.tmpl(data.slice(0, 3)).appendTo("#row1");
template.tmpl(data.slice(3)).appendTo("#row2");
}
});
$('button').click(function (e) {
$.ajax({
url: $('form').attr("action"),
data: $('form').serialize(),
type: 'post',
success: processServerResponse
})
e.preventDefault();
})
function processServerResponse(data) {
var inputElems = $('div.dcell').hide();
for (var prop in data) {
var filtered = inputElems.has('input[name=' + prop + ']')
.appendTo("#row1").show();
}
$('#buttonDiv, #totalDiv').remove();
$('#totalTmpl').tmpl(data).appendTo('body');
}
});
</script>
<script id="totalTmpl" type="text/x-jquery-tmpl">
<div id="totalDiv" style="clear: both; padding: 5px">
<div style="text-align: center">Total Items: <span id="total">${total}</span></div>
<div id="Div1">
<button type="submit">Place Order</button></div>
</div>
</script>
В дополнение к type
я использовал несколько настроек. Чтобы указать цель POST
запроса, я использовал настройку url
, которую я описал ранее. В этом примере я беру в документе url
цели из элемента form
. Я указываю данные, которые должны быть отправлены, используя настройку data
, которую я установил при помощи метода serialize
, описанного главе 33.
Выходя за рамки GET и POST
Можно использовать настройку
type
, чтобы указать любой HTTP метод, но вы можете испытывать сложности, если будете использовать что-то другое, а неGET
илиPOST
. Это случается потому, что многие файерволы и сервера конфигурированы таким образом, что отклоняют другие виды запросов. Если вы хотите использовать другие HTTP запросы, вы делаетеPOST
запрос, но добавляете заголовокX-HTTP-Method-Override
, устанавливая его для метода, который вы хотите использовать, например, вот так:X-HTTP-Method-Override: PUT
Это соглашение широко поддерживается фреймворками веб приложений и является распространенным способом создания веб приложений RESTful (Representational State Transfer, "передача состояния представления"), о чем вы более подробно можете прочитать на http://en.wikipedia.org/wiki/Representational_state_transfer. Информацию о том, как можно установить заголовок jQuery Ajax запроса можно найти в разделе "Установка тайм-аутов и заголовков".