Отправка post jquery. Как написать на чистом JavaScript е Ajax, get, post запросы
В данной статье я расскажу, как написать на чистом 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 содержит поля с именами, порядковым номером и адресом.
Надеюсь, эта статья будет вам полезна.
В эпоху современного веба, большинство сайтов становятся все более интерактивными. Если ранее для получения обновленных данных нам нужно было обновить полностью страницу, то сейчас появились технологии которые позволяют полностью страницу не загружать, а только лишь отдельную ее часть. В свою очередь это предоставляет удобство как пользователям так и владельцам серверов, ведь для пользователя загрузка страницы будет быстрее, так как загружается только отдельная часть страницы, а серверу не нужно каждый раз генерировать страницу и отдавать ее пользователю. Эти возможности просто реализовать при помощи php и ajax.
Сегодня мы разберем небольшой пример для лучшего понимания работы концепции AJAX . Иногда новичкам бывает трудно понять каким же образом взаимодействует между собой php и ajax, много людей ищут примеры того как валидировать формы на лету без перезагрузки всей страницы. Я вам вкратце покажу как это делается, для того, чтобы вы могли понять основы и принципы которые позволят вам в будущем более быстро освоить другие инструменты и писать свои собственные скрипты.
Придумаем небольшое задание себе, будем проверять наличие email адреса в базе данных без перезагрузки страницы используя php и ajax. Такой пример хорошо продемонстрирует как мы можем взаимодействовать с сервером без перезагрузки страницы в браузере, а также, это часто используется при различного рода валидациях пользовательских форм. В корневом каталоге создадим 3 файла с именами index.php , email.php , validate.js .
Создание страницыСоздадим простую страницу с одной формой, которая содержит только одно поле для ввода email.
Синтаксис файла index.php
AJAX Tutorial
Самый простой способ работать с AJAX — это подключить фреймворк jQuery , что собственно я и сделал. jQuery предоставляет нам простой в понимании и работе синтаксис для отправки AJAX запросов, почему бы не использовать это преимущество?
Создание js скриптаСинтаксис файла validate.js
$(document).ready(function(){ var email = ""; $("#email").keyup(function(){ var value = $(this).val(); $.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать.Этот Email уже занят."); } } }); }); $("#submit").click(function(){ if(email == ""){ alert("Please, put data to all email"); }else{ $.ajax({ type: "POST", url:"email.php", data:"add_email="+email, success:function(msg){ $("#message").html(msg); } }); } }); });
Обработчик на phpЭтот скрипт будет получать POST
запрос от клиента, обрабатывать его и возвращать результат. AJAX
считывает результат и на его основе принимает решение.
Синтаксис файла email.php
$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["email"]) && $_POST["email"] != ""){ $email = $_POST["email"]; $email = mysqli_real_escape_string($connection,$email); if(!filter_var($email, FILTER_VALIDATE_EMAIL)){ echo "invalid"; }else{ $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if(mysqli_num_rows($result) == 1){ echo "invalid"; }else{ echo "valid"; } } } if(isset($_POST["add_email"]) && $_POST["add_email"] != ""){ $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql)){ echo Success"; }else{ echo "Error"; } }
В нашем php скрипте, самый обычный код, который обрабатывает post запрос и печатает на странице определенный текст. В результате AJAX отправляет запрос php скрипту, скрипт его обрабатывает и выдает результат, AJAX считывает результат и изменяет страницу в реальном времени.
AJAX передает POST запрос скрипту посредством этого участка кода:
$.ajax({ type:"POST", url:"email.php", data:"email="+value, success:function(msg){ if(msg == "valid"){ $("#message").html("Этот Email можно использовать. "); email = value; }else{ $("#message").html("Этот Email уже занят. "); } } });
type - Тип запроса, POST или GET. В нашем случае POST;
url - адрес скрипта которому отправляют запрос;
data - данные которые передаются в запросе;
success - что делать в результате успешного выполнения запроса. В нашем случае вызывается функция;
В самом скрипте, проверка наличия email в базе выполняется при каждом вводе символа в поле email. В скрипте за обработку ввода отвечает участок $("#email").keyup(function(){}); , который проверяет нажатие клавиши в поле с id = "email" .
Как видите, код довольно простой и не требует особо больших навыков для понимания, все завязано на обработке событий keyup() - нажатие клавиши, click() - клик мышкой по элементу. Далее следует AJAX
запрос и ответ от скрипта. Таким образом используя php и ajax можно можно получить практически безграничные возможности для создания интерактивных страниц.
Данный код не претендует на звание высококачественного, но если развить, добавить правильных валидаций на уровне клиента и сервера, ввести css, то вполне можно использовать в своих проектах.
Если у вас возникли вопросы, не стесняйтесь, пишите комментарии.
Желаю вам хорошего дня и до скорых встреч 🙂
Когда я начинал использовать JavaScript и JQuery, то был разочарован отсутствием простых примеров использования Ajax в jQuery.
Нужно понимать, что Ajax-запрос такой же, как и любой другой запрос. Единственным его отличием является то, что пользователю не нужно перезагружать страницу. Например, это позволит пользователю отправить данные формы без перехода на другую веб-страницу.
Пример запроса GET, отправленного с помощью jQuery и Ajax:$.ajax({ type: "GET", url: "test.php", success: function(data){ alert(data); } });
В примере кода передаются три параметра:
- type : тип HTTP запроса. В этом примере я отправляю запрос GET. Если вы хотите отправить запрос POST, измените “GET” на “POST”.
- url : адрес,на который вы хотите отправить Ajax запрос. В нашем случае это страница “test.php”. Помните, что URL-адрес указывается относительно текущей страницы.
- success : функция, которая вызывается, если запрос был успешным. Она принимает параметр data, который будет содержать вывод страницы test.php. То есть, если test.php выводит строку “OK”, то параметр data будет содержать строку “OK”.
Поэкспериментируйте с приведённым выше кодом. Например, замените“GET” на “POST” и измените URL-адрес. Можно использовать инструменты разработчика, встроенные в Firefox / Chrome для отладки Ajax- запросов. Они доступны на вкладке «Сеть». Инструменты разработчика позволяют визуализировать запрос.
Что если мы захотим добавить параметры запроса GET к Ajax-запросу?$.ajax({ type: "GET", url: "test.php", data: {name:"Wayne"}, success: function(data){ alert(data); } });
Я добавил новый параметр data. Это объект JavaScript, содержащий данные, которые передаем в запросе. Поскольку мы отправляем запрос GET, эти параметры будут автоматически добавлены к строке запроса: test.php?name=Wayne
Пример добавления нескольких параметров GET:$.ajax({ type: "GET", url: "test.php", data: {name: "Wayne", age: 27, country: "Ireland"}, success: function(data){ alert(data); } });
Приведенный выше код отправит запрос GET к test.php?name=Wayne&age=27&country=Ireland
Поэкспериментируйте с кодом, чтобы разобраться в нём. Попробуйте добавлять и удалять параметры, чтобы понять, как отправлять данные с помощью jQuery и Ajax.
А если мы хотим отправить запрос POST к файлу submission.php ?
$.ajax({ type: "POST", url: "submission.php", data: {name:"Wayne", age: 27}, success: function(data){ alert(data); } });
Я изменил тип метода (с GET на POST) и URL-адрес (на submission.php). В этом примере параметры name и age будут отправлены как переменные POST. Это означает, что на странице submission.php их можно получить с помощью следующего кода:
$name = $_POST["name"]; $age = $_POST["age"];
Если использовать запрос GET, то переменные будут отправлены через строку запроса. Обратиться к ним можно следующим образом:
$name = $_GET["name"]; $age = $_GET["age"];
Последней частью паззла является функция success() . Она вызывается, если Ajax-запрос завершается успешно. В примере, приведенном выше, я вывожу результат в сообщении. Но в большинстве случаев вы будете использовать эту функцию для отображения уведомлений на странице. Например, если пользователь отправляет форму с помощью Ajax, тогда эта функция применяется для проверки ответа. А также для вывода сообщения о том, что данные формы успешно отправлены на сервер.
Надеюсь, эта статья помогла вам разобраться с основами Ajax-запросов!
Данная публикация представляет собой перевод статьи «Simple Ajax request example with JQuery and PHP » , подготовленной дружной командой проекта
Сравнивать всегда интересно и сложно одновременно - особенно в случае, когда сравниваемые системы выполняют одинаковые функции, но делают это по-разному.
Современные веб-приложения становятся все более изощренными и все более перегружаются сложной логикой.
Метод jQuery.post() выполняет HTTP POST-запрос для получения данных с сервера.
Синтаксис метода jQuery.post()jQuery.post(url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ])
- url - строка, содержит URL запроса, для отправки данных.
- data - строка или Plain-объект (ассоциативный массив), данных для отправки на сервер.
- success(data, textStatus, jqXHR) - функция обратного вызова, вызывается если запрос успешен.
- dataType - строка, тип данных ожидаемые от сервера. По умолчанию, jQuery пытается определить автоматически (xml, json, script или html).
Пример ниже, эквивалент jQuery.post() в исполнении jQuery.ajax():
$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });
В функцию обратного вызова success передаются возвращаемые данные, которые могут быть корневым элементов XML, строкой text, JavaScript-файлом или JSON-объектом, в зависимости от MIME-типа ответа. Также передается текстовый статус ответа.
Начиная с версии jQuery 1.5 в функцию success передается jqXHR-объект.
В большинстве реализация обработчик success задается следующим образом:
JQuery.post("ajax/test.html", function(data) { $(".result").html(data); });
В этом примере запрашивается HTML-код и вставляется на страницу, в указнное место.
Данные получаемые методом jQuery.post() никогда не кешируются, таким образом параметры cache и ifModified метода jQuery.ajaxSetup() будут игнорироваться.
jqXHR-объект.С версии jQuery 1.5 все AJAX-методы возвращают расширенный объект XMLHttpRequest. Это XHR-объект jQuery или коротко jqXHR, возвращается jQuery.post() реализуя Promise-интерфейс, предоставляя ему все свойства, методы и поведение Promise (смотрите Отложенный объект, для получения дополнительной информации). jqXHR.done() (вместо success), jqXHR.fail() (вместо error) и jqXHR.always() (вместо complete) принимают аргумент функции, которая вызывается, когда запрос завершается. Для получения информации об аргументах этой функции обратитесь в раздел документации jQuery.ajax().
Promise-интерфейс также позволяет AJAX-методам в jQuery, в том числе и JQuery.post(), создать цепочку из jqXHR.done(), jqXHR.fail(), jqXHR.always(), т.е. из нескольких методов обратного вызова на один запрос, и даже назначить эти функции, после того как запрос был завершен. Если запрос уже завершен, назначенные вновь методы будут выполнены сразу же.
// Назначаем запросы сразу же после запроса // и сохраняем jqXHR-объект этого запроса. var jqxhr = $.get("example.php", function() { alert("success"); }) .done(function() { alert("second success"); }) .fail(function() { alert("error"); }) .always(function() { alert("finished"); }); // выполняем какой-то код здесь... // Добавляем новый обработчик завершения запроса, для уже завершенного запроса jqxhr.always(function(){alert("second finished");});
Устаревшие обработчики.Методы jqXHR.success(), jqXHR.error(), jqXHR.complete() являются устаревшими с версии jQuery 1.8. В будущем эти методы будут удалены. Используйте вместо них jqXHR.done(), jqXHR.fail(), jqXHR.always(), соответственно.
Дополнительное примечание.- Из-за ограничений безопасности браузеров, большинство AJAX-запросов ограничены той же политикой безопасности. AJAX-запросы не могут успешно извлекать информацию из других доменов, поддоменов или протоколов.
- Если во время запроса jQuery.get() возникает ошибка, то это произойдет не заметно, пока не будет вызван глобальный метод jQuery.ajaxError(). Альтернативой обработки ошибок, начиная с версии jQuery 1.5, может быть jqXHR-объект, возвращаемый jQuery.get().
Пример: Выполняется запрос на страницу test.php, но не выполняется обработка данных.
JQuery.post("test.php");
Пример: Запрос на страницу test.php с отправкой некоторых данных (без обработки полученных данных).
JQuery.post("test.php", { name: "John", time: "2pm" });
Пример: Передается массив данных на сервер (без обработки полученных данных).
JQuery.post("test.php", { "choices": ["Jon", "Susan"]});
Пример: отправка данных формы используя Ajax-запрос.
JQuery.post("test.php", jQuery("#testform").serialize());
Пример: Оповещаем об успешном получении данных со страницы test.php (HTML или XML, в зависимости от полученных данных).
JQuery.post("test.php", function(data) { alert("Data Loaded: " + data); });
Пример:Оповещаем об успешном получении данных со страницы test.cgi с дополнительной отправкой данных (HTML или XML, в зависимости от полученных данных).
JQuery.post("test.php", { name: "John", time: "2pm" }) .done(function(data) { alert("Data Loaded: " + data); });
Пример: Получить содержимое страницы test.php, возвращаемые в JSON-формате (), и вывести их на страницу.
JQuery.post("test.php", function(data) { $("body").append("Name: " + data.name) // John .append("Time: " + data.time); // 2pm }, "json");
Пример: Отправка данных формы используя Ajax-запрос и вставка полученных данных в div.
// добавляем обработчик сабмита формы $("#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 }); // вставляем полученные результаты posting.done(function(data) { var content = $(data).find("#content"); $("#result").empty().append(content); }); });
