Jquery post запрос не приходят данные. Отправка POST-запросов через JavaScript. PHP пример работы функции json_decode
Уже достаточно давно многие сайты обладают динамическими страницами, то есть они обновляются без перезагрузки. Это достигается путём обращений к серверу через JavaScript , в большинстве случаев, это POST и GET запросы . И практически всегда такие сайты используют для этого Ajax . И далеко не все знают (к сожалению), что Ajax - это не отдельный язык, а всего лишь библиотека JavaScript . Вывод: Ajax - это лишь удобный способ отправить POST-запросы , но всё это можно сделать и без его помощи. Вот как отправить POST-запросы через JavaScript без Ajax , я расскажу в этой статье.
Мы с Вами сейчас решим классическую задачу - это суммирование двух чисел, заданных пользователем. То есть мы с Вами считаем из текстовых полей 2 числа, отправим их на сервер, получим ответ и выведем на страницу. И всё это без перезагрузки страницы .
Начнём с простого: написание PHP-кода :
Здесь всё элементарно, поэтому даже не буду комментировать. А вот теперь более сложная часть - клиентская:
/* Данная функция создаёт кроссбраузерный объект XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!="undefined") {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function summa() {
var a = document.getElementById("a").value; // Считываем значение a
var b = document.getElementById("b").value; // Считываем значение b
var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
xmlhttp.open("POST", "test.php", true); // Открываем асинхронное соединение
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Отправляем кодировку
xmlhttp.send("a=" + encodeURIComponent(a) + "&b=" + encodeURIComponent(b)); // Отправляем POST-запрос
xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
if (xmlhttp.readyState == 4) { // Ответ пришёл
if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
document.getElementById("summa").innerHTML = xmlhttp.responseText; // Выводим ответ сервера
}
}
};
}
Сумма равна:
HTML-код я комментировать не буду, поскольку он совершенно прозрачный. А вот к JavaScript я немного добавлю, несмотря на подробные комментарии. Во-первых, функция getXmlHttp() является универсальной. Вы её можете смело копировать в свои скрипты. Её задача вернуть такой XMLHTTP , чтобы он работал в любом браузере. Потому что самый популярный вариант - это new XMLHttpRequest() , однако, он не работает, например, в IE6 . Другие варианты также не являются универсальными, поэтому здесь мы просто подбираем под любой браузер рабочий вариант.
Я написал также в комментариях про "асинхронную работу ". Есть ещё синхронный вариант. Отличие только в том, что в синхронном пока не будет получен ответ от сервера, браузер работать не будет , он просто повиснет. Мне трудно придумать такую задачу, где это необходимо, поэтому я сразу написал асинхронный вариант. Он работает следующим образом: мы отправляем запрос и ждём ответа, но при этом браузер не виснет . А когда ответ приходит (xmlhttp.readyState == 4 ), то мы сразу обрабатываем ответ. Вот это и есть асинхронный вариант работы, он чуть-чуть сложнее, но только его и нужно использовать (за исключением очень редких случаев).
Вот таким способом отправляются POST-запросы через JavaScript . Как видите, Ajax нам вовсе не потребовался. И я настоятельно рекомендую, если у Вас всего пару запросов на весь сайт, то даже не думайте использовать эту тяжеловесную библиотеку, а используйте материал данной статьи.
GET-запрос
GET или POST-запрос отправляется через объект XMLHttpRequest (также сокращённо называется XHR).
// выполнить код, когда придёт ответ с GET-запроса // код при успешном запросе // Оправка GET-запроса ajax.open("GET" , "/handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send();Стоит обратить внимание на метод setRequestHeader() . Данный метод говорит серверу, что был отправлен Ajax-запрос. Многие фреймворки, например jQuery, устанавливают данный заголовок по умолчанию. Если не установить данный заголовок, то сервер может не определить Ajax-запрос и вернуть ошибку.
Отправлять GET или POST-запрос можно только на текущем домене сайта (из-за правила ограничения домена, также называемые «Same Origin Policy»).
Метод open() также может принимать третий параметр false , который делает запросы синхронными (т.е. код перестаёт выполняться, пока не придёт ответ от сервера). Данный способ считается нерекомендованным к использованию, т.к. может замедлять работу JavaScript. Браузер Chrome также выдаёт предупреждение в консоли, когда используется данным параметр.
POST-запрос
Сначала надо указать, какие данные надо отправить:
// Старые браузеры var params = "lang=JavaScript&framework=jQuery" ; // Современные браузеры var params = new FormData(); params.append("lang" , "JavaScript" ); params.append("framework" , "jQuery" );Объект FormData() поддерживается современными браузерами (поддержка IE с версии IE 10).
В FormData() можно также передать элемент формы, чьи поля будут переданы в POST-запросе.
var params = new FormData(document .getElementById("form-name" )); // 1-ый способ var params = new FormData(document .forms["form-name" ]); // 2-ой способСозданные параметры можно передать через метод send() .
var ajax = new XMLHttpRequest(); // выполнить код, когда придёт ответ с POST-запроса ajax.onreadystatechange = function () { if (ajax.readyState == 4 ) { if (ajax.status == 200 || ajax.status == 304 ) { // код при успешном запросе ajax.response; // ответ сервера } else { // код при ошибке } } } // Оправка POST-запроса ajax.open("POST " , "/ajax-handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send(params ); Please enable JavaScript to view the jQuery AJAX Определение и применениеjQuery функция $.post() позволяет загрузить данные с сервера с помощью HTTP запроса методом POST. Для загрузки данных с помощью HTTP запроса методом GET вы можете воспользоваться jQuery функцией $.get() .
Обращаю Ваше внимание, что функция $.post() является сокращенной версией функции $.ajax() со следующими параметрами:
$.ajax({ type : "POST " // метод HTTP, используемый для запроса url : "url ", // строка, содержащая URL адрес, на который отправляется запрос data : data, // данные, которые будут отправлены на сервер success : success , // функция обратного вызова, которая вызывается если AJAX запрос выполнится успешно dataType : "dataType " // тип данных, который вы ожидаете получить от сервера } );
Метод GET в отличии от POST при отправке формы передает собранную информацию как часть URL:
Url?name=value&name=value // метод GET использует пары имя = значение
При отправке данных методом POST данные передаются таким образом, что пользователь уже не видит передаваемые обработчику формы данные (добавляет данные формы в теле запроса http, которые не отображаются в URL).
Обратите внимание на некоторые нюансы при работе с HTTP методами GET и POST :
- Метод GET ограничивает объём передаваемой в URL информации (около 3000 символов), метод POST не имеет подобных ограничений.
- Никогда не используйте метод GET , если вам необходимо передать конфиденциальные данные (например, пароль пользователя, так как он будет передан в строке URL - в открытом виде).
- Страница, сгенерированную методом GET , можно пометить закладкой (адрес страницы всегда будет уникальный), а страницу, сгенерированную метод POST нельзя, так как адрес страницы не изменяется (данные в URL не передаются).
- Учтите, что с использованием метода GET можно передать данные не через форму, а через URL страницы.
Страницы, загруженные функцией $.post() никогда не кэшируются, по этой причине значения параметров cache (определяет будут ли кэшироваться страницы, по умолчанию true ) и ifModified (проверяет поля заголовка Last-Modified , по умолчанию false ) jQuery функции .ajaxSetup() (устанавливает значения по умолчанию для будущих запросов AJAX ) не повлияют на эти запросы .
Добавлен в версии jQuery 1.0 Значения параметровurl | Строка, содержащая URL адрес, на который отправляется AJAX запрос. Обязательный параметр. |
data | Объект или строка, которые будут отправлены на сервер вместе с AJAX запросом. |
success | Функция обратного вызова, которая вызывается если AJAX
запрос выполнится успешно. Необязательный параметр.
Функция принимает следующие параметры:
|
dataType | Определяет тип данных, который вы ожидаете получить от сервера. Если тип данных не указан, то jQuery будет пытаться определить его на основе типа MIME из ответа (XML
тип MIME
приведет к получению XML , с версии jQuery 1.4 json
будет давать объект JavaScript
, script
будет выполнять скрипт, а все остальное будет возвращено в виде строки). Необязательный параметр.
Доступные типы (результат передается в качестве первого аргумента в функцию обратного вызова success ):
|
В этом примере мы привязываем JavaScript обработчик событий "submit" (обработчик отправки формы), который срабатывает в момент отправки (в нашем случае заполненной ) формы при нажатии на элемент с типом submit (кнопка для отправки формы).
Кроме того, мы создаем переменную, которая содержит закодированный набор элементов формы в виде строки - результат выполнения метода .serialize() . После этого с использованием jQuery функции $.post() выполняем асинхронный AJAX запрос со следующими параметрами:
- url
- файл, к которому мы обращаемся ("user.php
"), он содержит следующий PHP код:
Результат
{"a":1,"b":2,"c":3,"d":4,"e":5}
PHP пример работы функции json_decode
$json = "{"a":1,"b":2}";
var_dump(json_decode($json, true));
$arr = json_decode($json, true);
echo "
".$arr["a"]. "
".$arr["b"]. "
"; Результат array(5) { ["a"] => int(1) ["b"] => int(2) } 1 2 Пример работы Ajax запроса методом POSTЧто мы будем делать:
Проверяем на корректность отправленные (POST-запросом AJAX) данные (данные вводятся пользователем). Если данные корректны, выводим сообщение. В ином случае делаем красную подсветку у полей. Все работает асинхронно, то есть без перезагрузки страницы. Вы можете использовать данный принцип, например, чтобы создать систему комментариев с вставкой комментариев в базу данных.JQuery это библиотека javascript, цель которой "пиши меньше, делай больше". jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.
jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.
Что такое AJAX?AJAX - это асинхронный (т.е. браузер, отослав запрос, может делать что угодно, например, показать сообщение об ожидании ответа, прокручивать страницу, и т.п.) JavaScript и XML. Он используется для создания динамических и быстрых веб-страниц. AJAX позволяет нам обновлять часть веб-страницы без перезагрузки страницы целиком.
Что насчет jQuery и AJAX?Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.
jQuery делает существующий браузерный Ajax API мощнее и проще в использовании. Создавать вызовы ajax обычным способом, используя javascript, немного затруднительно: так как вы должны учитывать, что для различных браузеров требуются разные подходы к созданию объекта XMLHttpRequest . Кроме того отправлять данные, например, из форм, становится сложнее, если вы используете обычный javascript для вызова ajax.
jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.
В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме . Давайте начнем... Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.
Шаг 1. Создайте файл school.php и вставьте в него следующий код:В приведенном выше коде мы получаем имя и номер студента и, используя jquery и ajax, отсылаем их в details.php .
function getdetails(){ var name = $("#name").val(); var rno = $("#rno").val(); $.ajax({ type: "POST", url: "details.php", data: {fname:name, id:rno} }).done(function(result) { $("#msg").html(" Address of Roll no " +rno +" is "+result); }); }
Your Name: Roll Number: В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.