В принципе метод Post аналогичен методу Get, за одним единственным исключением – запрос передается не в адресной строке, а в теле (мы не видим параметров запроса).
Итак, на выходе $.post(url,data,success,dataType) мы получаем объект jqXHR и можем использовать все его методы и свойства.
Отправим на сервер такой запрос
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(function(){ $('button').on('click',function(){ var my_jqXHR = $.post('ajaxServerAnswer2.php',{name:'Stas',family:'Panteleev'}, function(data){$('#mydiv').html(data)} // << Ответ сервера ); my_jqXHR.done(function(){alert('Server answer = '+my_jqXHR.status);}); }); //button }); //function |
ajaxServerAnswer2.php – получим такой ответ сервера
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $name=$_REQUEST['name']; $family=$_REQUEST['family']; if ($name=='Stas' && $family=='Panteleev') { echo "Hello ".$name." I know you!";} else { echo "Hello ".$name."I do not know you!"; } ?> |
Отправка данных формы
Довольно часто при помощи метода post отправляют данные формы. Посмотрим на простом примере как это можно сделать. Пусть у нас есть форма с полями имени и фамилии. Скрипт будет определять – знает нас сервер или нет.
Main.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<html> <head> <meta charset='utf-8'> <script src="jquery-1.11.2.min.js"></script> </head> <body> <form style="text-align:center" action="ajaxServerAnswer2.php" id="myForm"> <input type="text" id="name" placeholder="Name" /><br><br> <input type="text" id="family" placeholder="Family" /><br><br> <input type="submit" value="Войти" /> </form> <div id="mydiv"></div> <script type="text/javascript"> $("#myForm").submit(function(event) { // Предотвращаем обычную отправку формы event.preventDefault(); // Передаем параметры $.post('ajaxServerAnswer2.php', {'name':$('#name').val(), 'family' : $('#family').val()}, function(data) { $('#mydiv').html(data); // << Ответ серверного скрипта отправляем в div }); }); </script> </body> </html> |
ajaxServerAnswer2.php
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php $name=$_REQUEST['name']; $family=$_REQUEST['family']; if ($name=='Stas' && $family=='Panteleev') { echo "Hello ".$name." I know you!";} else { echo "Hello ".$name."I do not know you!"; } ?> |
Сериализация
Если полей у нас много, то мы можем отправлять данные при помощи функции serialize(), но при этом атрибуты name полей отправляемой формы должны совпадать с именами параметров, ожидаемых скриптом Php.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<form style="text-align:center" action="ajaxServerAnswer2.php" id="myForm"> // Каждому атрибуту нужно присвоить имя, совпадающее с ожидаемым параметром на сервере <input name="name" type="text" id="name" placeholder="Name" /><br><br> <input name="family" type="text" id="family" placeholder="Family" /><br><br> <input type="submit" value="Войти" /> </form> <div id="mydiv"></div> <script type="text/javascript"> $("#myForm").submit(function(event) { // Предотвращаем обычную отправку формы event.preventDefault(); // Передаем параметры $.post('ajaxServerAnswer2.php', $('#myForm').serialize(), // << Изменения здесь function(data) { $('#mydiv').html(data); // << Ответ серверного скрипта отправляем в div }); }); </script> |