Jquery post примеры. Ajax запрос методом POST, пример с использованием json_encode. Простой ajax-запрос через jQuery с помощью функции AJAX
В данной статье я расскажу, как написать на чистом JavaScript е Ajax без использования библиотек.
Для начала нам нужно понять, как работает Ajax. Ajax работает в JavaScript с помощью стандартной функции XMLHttpRequest, но в IE нужно использовать функцию ActiveXObject («Microsoft.XMLHTTP»).
Покажу на примерах, как всё это работает.
Начнём.
Нужно сделать проверку Ajax объекта, чтобы сделать скрипт кроссбраузерно.
Вот код проверки:
Var M = {}; // Здесь мы создаём объект для создания методов и свойства.
M._xhr = function(){try {this.a = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {try {this.a = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {this.a = false;}} if(!this.a && typeof XMLHttpRequest!="undefined") { this.a = new XMLHttpRequest();}return this.a;}
Потом нужно сделать несколько функций для упращения кода и его удобства. Вот код:
M._d = document;
M._func = function(obj) {return Object.prototype.toString.call(obj) === ""; }
M._array = function(obj) { return Object.prototype.toString.call(obj) === ""; }
M._ge_by_tag = function(id){ this.p = M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do{return this.p;this.count++;}while(this.count = 200 && r.status < 300) {
this.text = r.responseText;if(d.onDone) d.onDone(this.text, r); else if(d.onJsonDone) d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = "";
}else {alert(r.status);}}}}}
Сейчас нужно разобраться в коде:
R.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");r.setRequestHeader("X-Requested-With", "XMLHttpRequest");
Эта строка означает, что мы используем Ajax.
Дальше.
R.open("POST", link, true);
r.send(q);
А это обработчик открывает запрос с сервером, где send отправляет данные.
Этот код для POST запроса, а для GET нужно немного изменить. Нужно просто не отправлять данные с помощью send. Для отправки GET запроса и его данных нужно просто в open после link прибавить вот этот "+"?"+q". Здесь мы отправляем данные в открытом виде. Например:
R.open("GET", link+"?"+q, true);
r.send(null); // Здесь напишем null. поскольку ничего не нужно отправить.
test.php?text=hello world
Вот с кодом всё. А теперь как использовать код.
Вот пример:
demo test
window.onload = function(){
M.get("/test.php",{ // M.post or M.get
query:{text:"hello"}, // Значение запроса
onDone:function(a){ // Если всё нормально, то отобразить результат.
M._ge_by_id("result").innerHTML = a;
},
onFail:function(a){ // А если нет. то показать ошибку
alert("Error");
}
});
}
Есть ещё возможность преобразовать результат в JSON.
Вот код:
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 содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
jQuery.post(url [, data] [, success(data, textStatus, jqXHR)] [, dataType])
url
Тип: строка
Адрес, на который отправляется запрос.
data
Тип: объект или строка
Данные, отправляемые на сервер в виде объекта (ключ:значение) или строки.
Тип: функция
Функция, вызываемая при успешном завершении Ajax запроса.
dataType
Тип: строка
Тип данных, ожидаемых в качестве ответа от сервера. По умолчанию jQuery определит сам.
Опции:
url
- адрес, на который отправляется запрос.
data
- данные, отправляемые на сервер в виде формате map (наборы ключ:значение) или string (строка)
success(data, textStatus, jqXHR)
- функция, вызываемая при успешном завершении ajax-запроса.
dataType
- Тип данных, ожидаемых от сервера. По умолчанию jQuery определит сам.
$.post() эквивалетна:
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
Функция обратного вызова success, принимает ответ от сервера, который может быть в виде XML, строки, JavaScript файла или объекта JSON, в зависимости от MIME типа ответа. Это значение так же помещается в статус ответа.
Начиная с версии 1.5 , функция обратного вызова success принимает объект jqXHR (в ранних версиях объект XMLHttpRequest). Классическое использование метода:
$.post("ajax/test.html", function(data) { $(".result").html(data); alert("Загрузка завершена."); });
Данный код делает запрос к HTML файлу и выводит его содержимое.
Страницы полученные в результате POST запроса не кэшируются ни при каких условиях.
Объект jqXHRНачиная с версии 1.5 , $.post() возвращает объект jqXHR, реализующий интерфейс deferred, что позволяет задавать дополнительные обработчики. Помимо стандартных для объекта deferred методов.done(), .fail() и.then(), с помощью которых можно устанавливать обработчики, в jqXHR реализованы их копии: .success(), .error() и.complete(). Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов.
// запускаем ajax-запрос, устанавливаем обработчики событий. // Возвращаемые методом $.get объект сохраним в переменной jqxhr для дальнейшего использования var jqxhr = $.post("example.php", function() { alert("success"); }) .done(function() { alert("second success"); }) .fail(function() { alert("error"); }) .always(function() { alert("finished"); }); // установим еще один обработчик завершения запроса jqxhr.always(function(){ alert("second finished"); });
Заметка об устаревших методах
Функции обратного действия, введённые в jQuery 1.5 устарени в версии 1.8 . Вместо jqXHR.success(), jqXHR.error() и jqXHR.complete() теперь следует использовать jqXHR.done(), jqXHR.fail() и jqXHR.always().
ПримерыСделать запрос к test.php, игнорируя ответ:
$.post("test.php");
Сделать запрос к test.php, передать данные, игнорировать ответ:
$.post("test.php", { name: "John", time: "2pm" });
Передать массив данных на сервер, игнорируя ответ:
$.post("test.php", { "choices": ["Jon", "Susan"]});
Обработать ответ от сервера (HTML или XML в зависимости от того, что пришло):
$.post("test.php", function(data) { alert("Data Loaded: " + data); });
Сделать запрос к test.cgi, предать данные, обработать ответ (HTML или XML в зависимости от того, что пришло):
$.post("test.cgi", { name: "John", time: "2pm" }) .done(function(data) { alert("Data Loaded: " + data); });
Получить от сервера ответ в JSON формате и вывести его на страницу ():
$.post("test.php", function(data) { $("body").append("Name: " + data.name) // John .append("Time: " + data.time); // 2pm }, "json");
Отправка формы POST запросом и отображение результата в div
$.ajax({ /* прикрепить событие submit к форме */ $("#searchForm").submit(function(event) { /* отключение стандартной отправки формы */ event.preventDefault(); /* собираем данные с элементов страницы: */ var $form = $(this), term = $form.find("input").val(), url = $form.attr("action"); /* отправляем данные методом POST */ var posting = $.post(url, { s: term }); /* результат помещаем в div */ posting.done(function(data) { var content = $(data).find("#content"); $("#result").empty().append(content); }); });
Урок, в котором на примерах рассмотрим создание простых асинхронных AJAX запросов к серверу. В качестве метода передачи запросов будем использовать как метод GET, так и метод POST. На сервере обработку запросов выполним с помощью скриптов PHP.
Что такое асинхронный запрос AJAX?Технология AJAX в основном используется для создания асинхронных запросов к серверу. Асинхронный запрос - это такой запрос, который выполняется в фоновом режиме и не мешает пользователю взаимодействовать со страницей.
При отправке асинхронного запроса, браузер (страница) не "замораживается", т.е. с ней, как и прежде, можно работать. Но тогда как узнать, когда придёт ответ с сервера. Чтобы это определить, необходимо отслеживать свойство браузера readyState (состояние готовности). Данное свойство содержит число, по значению которого можно судить о том, в какой стадии находится запрос. В следующей таблице приведены основные значения свойства readyState и соответствующие им состояния.
Т.е. получается, что нам необходимо отследить, когда значение у свойства readyState будет равно 4. Это будет означать то, что на отправленный запрос, пришёл ответ с сервера. Остальные значения на практике используются довольно редко, и некоторые браузеры могут их не поддерживать.
Для того чтобы определить на какой стадии находится запрос, необходимо использовать событие объекта XMLHttpRequest onreadystatechange . Данное событие происходит каждый раз, когда изменяется значение свойства readyState . Следовательно, в обработчике этого события (неименованной или именованной функции) можно прописать действия, которые будут проверять равно ли данное свойство 4 и если равно, то например, вывести ответ сервера на страницу.
Создание асинхронного AJAX запроса (метод GET)Рассмотрим создание асинхронного AJAX запроса на примере, который будет после загрузки страницы приветствовать пользователя и отображать его IP-адрес.
Для этого необходимо создать на сервере 2 файла в одном каталоге:
Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):
Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные никакие не нужны, то данный этап можно пропустить.
Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).
Настроим запрос с помощью метода open() .
Указываются следующие параметры:
- Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
- URL-адрес, который будет обрабатывать запрос на сервере.
- Тип запроса: синхронный (false) или асинхронный (true).
- Имя и пароль при необходимости.
Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText .
Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status . Данное свойство определяет статус запроса. Если оно равно 200, то всё OK . А иначе произошла ошибка (например, 404 – URL не найден).
Отправим запрос на сервер с помощью метода send() .
Если используем для отправки запроса метод GET, то передавать данные в параметр данного метода не надо. Они передаются в составе URL.
Если используем для отправки запроса метод POST, то данные необходимо передать в качестве параметра методу send() . Кроме этого, перед вызовом данного метода необходимо установить заголовок Content-Type, чтобы сервер знал в какой кодировке пришёл к нему запрос и смог его расшифровать.
Содержимое элемента script:
// 2. Создание переменной request var request = new XMLHttpRequest(); // 3. Настройка запроса request.open("GET","processing.php",true); // 4. Подписка на событие onreadystatechange и обработка его с помощью анонимной функции request.addEventListener("readystatechange", function() { // если состояния запроса 4 и статус запроса 200 (OK) if ((request.readyState==4) && (request.status==200)) { // например, выведем объект XHR в консоль браузера console.log(request); // и ответ (текст), пришедший с сервера в окне alert console.log(request.responseText); // получить элемент c id = welcome var welcome = document.getElementById("welcome"); // заменить содержимое элемента ответом, пришедшим с сервера welcome.innerHTML = request.responseText; } }); // 5. Отправка запроса на сервер request.send();
В итоге файл welcome.html будет иметь следующий код:
Пример работы AJAX Пример работы AJAX window.addEventListener("load",function() { var request = new XMLHttpRequest(); request.open("GET","processing.php",true); request.addEventListener("readystatechange", function() { if ((request.readyState==4) && (request.status==200)) { var welcome = document.getElementById("welcome"); welcome.innerHTML = request.responseText; } }); request.send(); });
На сервере (с помощью php):
