Главная страница   /   15.4. Делаем POST запрос (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

15.4. Делаем 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 запроса можно найти в разделе "Установка тайм-аутов и заголовков".