Android
22.04.2024

Jquery post запрос не приходят данные. Как написать на чистом JavaScript е Ajax, get, post запросы

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); }); });

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:

Шаг 2: Создайте details.php и расположите в нем следующий код:

В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.

Для данного примера вам понадобится создать базу данных school и таблицу students . Таблица student содержит поля с именами, порядковым номером и адресом.

Надеюсь, эта статья будет вам полезна.

Осуществляет запрос к серверу методом POST, без перезагрузки страницы. Функция имеет несколько необязательных параметров.

url — url-адрес, по которому будет отправлен запрос.
data — данные, которые будут отправлены на сервер. Они должны быть представлены в форме объекта, в формате: {fName1:value1, fName2:value2, ...} .
callback(data, textStatus, jqXHR) — пользовательская функция, которая будет вызвана после ответа сервера.

Простое использование

Простейший ajax-запрос: отправим пустой запрос к серверу и не будем обрабатывать ответ. Это может быть использовано, например для подсчета количества наведений курсора на баннер (при каждом наведении серверу будет отправляться сигнал).

$.post ("/plusOne.php" ) ;

Рассмотрим более сложное взаимодействие с сервером. Отправим данные на сервер и обработаем их. Javascript будет выглядеть следующим образом:

// На сервер будет отправлен запрос страницы http://hostname/ajaxtest.php и указаны два параметра. // После получения ответа от сервера будет вызвана функция onAjaxSuccess, которая выведет // на экран сообщение с данными, присланными сервером. $.post ( "/ajaxtest.php" , { param1: "param1" , param2: 2 } , onAjaxSuccess ) ; function onAjaxSuccess(data) { // Здесь мы получаем данные, отправленные сервером и выводим их на экран. alert (data) ; }

На сервере, обработка Ajax запроса ничем не отличается от обработки обычного запроса:

В результате этого запроса, на странице появится табличка с текстом "I get param1 = param1 and param2 = 2"

Продвинутое использование

$.post() является сокращенным вариантом функции $.ajax() , вызванной со следующими параметрами:

$.ajax ({ url: url, type: "POST" , data: data, success: success, dataType: dataType } ) ;

Подробности использования параметра dataType можно найти в описании $.ajax() .

Замечание: большинство браузеров не позволяют проводить ajax-запросы на ресурсы с доменами, поддоменами и протоколами, отличными от текущего. Однако, это ограничение не распространяется на запросы типа jsonp и script .

Обработка выполнения запроса

Стандартным средством обработки успешного выполнения запроса, является указание собственной функции в параметре success. При вызове она получает данные переданные сервером, текстовый статус выполнения запроса, а так же Объект jqXHR .

Начиная с jQuery-1.5, метод $.post() возвращает объект jqXHR, который помимо прочего реализует интерфейс deferred , что позволяет задавать дополнительные обработчики выполнения. Помимо стандартных для объекта deferred методов .done(), .fail() и.then() , с помощью которых можно устанавливать обработчики, в jqXHR реализованы.success(), .error() и.complete() . Это сделано для соответствия привычным названиям методов, с помощью которых устанавливаются обработчики выполнения ajax-запросов. Однако начиная с jQuery-1.8 эти три метода станут нежелательными для использования .

// Запустим ajax-запрос, установим обработчики его выполнения и // сохраним объект jqxhr данного запроса для дальнейшего использования. var jqxhr = $.post ("example.php" ) .success (function () { alert ("Успешное выполнение" ) ; } ) .error (function () { alert ("Ошибка выполнения" ) ; } ) .complete (function () { alert ("Завершение выполнения" ) ; } ) ; // какой-либо код... // установим еще один обработчик удачного выполнения запроса jqxhr.complete (function () { alert ("Успешное выполнения 2" ) ; } ) ;

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

В данной статье я расскажу, как написать на чистом JavaScript е Ajax без использования библиотек.

Ajax - это технология, которая используется с помощью JavaScript. С помощью Ajax можно отправить GET, POST, запросы без обновления страницы.

Для начала нам нужно понять, как работает 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.
Вот код:
Случайные статьи

Вверх