Вывод html с помощью ajax

Ajax: Отправить HTML-форму без перезагрузки страницы

Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.

Обратите внимание, что метод отправки формы у нас POST, задан id=»ajax_form» и action=»». Также, после формы мы добавили div c id=result_form. Именно в этот div мы будем выводить результат обработки формы.

Теперь создадим второй файл — ajax.js

/* Article FructCode.com */
$( document ).ready(function() { $(«#btn»).click( function(){ sendAjaxForm('result_form', 'ajax_form', 'action_ajax_form.php'); return false; } );
}); function sendAjaxForm(result_form, ajax_form, url) { $.ajax({ url: url, //url страницы (action_ajax_form.php) type: «POST», //метод отправки dataType: «html», //формат данных data: $(«#»+ajax_form).serialize(), // Сеарилизуем объект success: function(response) { //Данные отправлены успешно result = $.parseJSON(response); $('#result_form').html('Имя: '+result.name+'
Телефон: '+result.phonenumber); }, error: function(response) { // Данные не отправлены $('#result_form').html('Ошибка. Данные не отправлены.'); } });
}

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку «Отправить», слушатель срабатывает и вызывает метод sendAjaxForm.

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это id формы отправки сообщения и url — это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).

Создадим последний файл — action_ajax_form.php

action_ajax_form.php — это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения.

Обратите внимание

 Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера.

Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.

Хотите научиться создавать профессиональные сайты с нуля? Пройдите интерактивный курс Профессия веб-программист с автоматической проверкой кода и по завершению вы не только создадите ваш собственный веб-сайт с адаптивной версткой, но и пройдете весь цикл разработки сайта — от верстки по макету, до программирования с помощью профессионального фреймворка!

Выводы

Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

В этом видео я расскажу про альтернативу редактору кода Sublime Text 3В этой статье я расскажу о том, что такое Webpack и как его используют в своих проектах frontend-раз…На современном Javascript можно разрабатывать не только Frontend часть сайта, но и Backend и в этой…Доступны для изучения новые уроки по профессиональному редактору кода PHPStorm в курсе Linux/GIT. Уз…В этой статье вы узнаете как установить и настроить XAMPP-VM (Apache, PHP, MySQL) для операционной с…Обучайтесь эффективнее на онлайн платформе FructCode с новыми интерактивными заданиями и новыми возм…Языки программирования развиваются и Javascript не стал исключением. В этой статье вы узнаете о том,…Первый язык программирования выбрать очень сложно. В этой статье вы узнаете, какой язык программиров…Фреймворки — это один из важных инструментов программиста. Узнать обо всех особенностях фреймворков,…Для хорошего программиста просто необходимо знание языка Javascript и умение работать с массивами. К…У языка Javascript достаточно непривычный для программистов синтаксис, особенно, если раньше они пис…Каждый кандидат, который хочет получить должность программиста в крупной компании, должен ответить н…Всплывающее окно на сайте — является инструментом привлечения внимания пользователя. Такие модальные…В программированию, очень часто встречается задача, когда нужно обратиться к другому сайту через HTT…Для продвижения сайта в интернет, через поисковые системы, необходимы производить оптимизации. При с…В этой статье вы узнаете, что такое файл index.php, чем его можно открыть. Мы рассмотрим самый прост…

Источник: https://fructcode.com/ru/blog/how-to-send-html-form-with-ajax/

Технология AJAX, примеры скриптов

Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

Здравствуйте, уважаемые читатели блога LifeExample, наконец-то меня посетило вдохновение и я готов порадовать вас новым, большим и полезным материалом для начинающих web-мастеров. В этой статье речь пойдет о золотой технологии AJAX и примерах скриптов, написанных на её основе.

Сегодня я сделаю упор на работу с XML данными, т.к. пытаясь разобраться с технологией AJAX, мне попадались лишь примеры работы с JSON форматом. О работе с ним читайте в продолжении к данному материалу, которое скоро будет подготовлено и опубликовано.

Предупреждаю! Эта публикация будет очень объемной, поэтому запаситесь терпением и приготовьтесь внимать смыслу рассматриваемых в ней примеров:

  1. Технология AJAX пример №1 — наипростейший пример, для ознакомления с азами AJAX.
  2. Технология AJAX пример №2 — отправка данных на сервер средствами AJAX.
  3. Технология AJAX пример №3 — отправка структуры данных с сервера в виде XML и работа с ними на стороне клиента.

Совместив все эти AJAX примеры воедино, мы получим реализацию обмена данными по AJAX технологии с форматом XML.

Давайте приступим к большой и трудоемкой работе. Но сначала ознакомьтесь с небольшим введением.

За интерактивностью будущее!

Все больше появляется пользователей, приходящих на наши веб-ресурсы, не желающих наблюдать перезагрузку страницы, при каждом их действии. Сегодня мы можем встретить много примеров работы сервисов, вышедших из каменного века перезагрузки страниц. К ним можно отнести наши разнообразные социальные сети, или всевозможные сервисы для веб-мастеров.

Дать пользователю свободу действий – и не перезагружать страницу, стало возможным с развитием и внедрением AJAX технологии.

Концепция технологии AJAX

Как вы уже поняли, эта «золотая» технология позволяет нам обмениваться данными меду браузером и сервером в фоновом режиме, не обновляя страницу. Говоря по-умному, сей обмен является асинхронным.

Под асинхронностью в программировании я понимаю процесс выполнения второстепенного действия, не прекращая основное.

Под асинхронность относительно AJAX можно представить, что первостепенным действием является процесс отображения страницы браузером. А второстепенным – обработка запросов пользователя сервером. В момент выполнения операций на стороне сервера, благодаря аяксу, браузер ждет ответа, не ограничивая работу пользователя со страницей.

Итак, концепция такова: между браузером и сервером не переставая происходит обмен данными, которые:

  1. Вводятся в браузер средствами пользовательского интерфейса;
  2. Отправляются на сервер;
  3. Обрабатываются на сервере, возможно, заносятся в БД;
  4. В это время браузер ожидает возвращение ответа;
  5. Пока браузер ждет, он не прекращает работу пользователя;
  6. Дождавшись данных от сервера в определенном формате, обрабатывает их и выводит в контент HTML страницы.

Вы можете пронаблюдать представленный процесс на схематической иллюстрации работы описываемой технологии.

Осталось упомянуть важный момент: данные циркулирующие между сервером и браузером, должны отвечать определённым правилам форматирования. Такие правила обычно описывают два формата:

  1. XML (eXtensible Markup Language) — расширяемый язык разметки;
  2. JSON (JavaScript Object Notation) —текстовый формат основанный на JavaScript.

В редких случаях можно обойтись свободным текстовым форматом передачи данных, но это скорее исключение.

Технология AJAX расшифровывается как (Asynchronous JavaScript and XML), из этого можно сделать вывод, что разработчики в первую очередь предполагают использование формата XML. Но на деле, как показывает практика все чаще используется формат JSON, в силу своего минимализма.

Важно

Другими словами – работать с обоими форматами можно одинаково хорошо, но один и тот же набор данных, представленный в JSON и XML, в первом будет иметь меньший размер.

Следовательно, если JSON имеет меньший размер, то и передаваться он будет быстрее, чем XML.

XML для AJAX

Чуть позже мы рассмотрим работу AJAX, с использованием данных в формате XML. А пока давайте разберемся, что же такое XML формат.

Во-первых, надо четко понимать, что данный формат является текстовым и его можно запросто создать собственноручно, с помощью notepad++ любого другого текстового редактора.

Во-вторых, синтаксис XML очень похож на всем нам известный HTML.

Вот пример HTML разметки:

Пример HTML разметкиОбычный текст, золотой текст.

Мы видим, что любой открытый тег имеет свой закрывающий эквивалент. Также некоторые из тегов имеют атрибуты. Тут я никому Америку не открыл, и все понимают, что этот HTML документ будет интерпретирован браузером, который вместо тегов применит соответствующие им стили для текста.

Отличием XML будет то, что тэги, используемые, этим форматом нигде не зафиксированы, и могут принимать любые пользовательские названия и атрибуты. Но для обработки этих тэгов нужно будет написать соответствующий алгоритм, чтобы правильно распознать данные и их атрибуты.

Пример структуры в формате XML

  Mark  Avdeev  Администратор блога lifeexample.ru

Такими произвольными тегами и атрибутами как в этом примере можно запросто описать карточку пользователя, системы.

Запомните! Вся работа приложения на основе технологии AJAX сводится к обмену сложными структурами данных между клиентом (браузер), и сервером (web сервер).

Замечание 1: Можно, но совершенно не обязательно писать парсер самостоятельно ведь разработчики PHP создали все необходимые универсальные функции («XML Parser Functions») для работы с XML форматом. Чтобы разобраться с ними нужно начать копать в сторону xml_parser_create().

Замечание 2: Технологией AJAX, тоже предусмотрен механизм отправки пользовательских данных.

Исходя из этих двух замечаний, можно прийти к выводу, о том, что для реализации полноценного веб приложения на AJAX, обменивающегося с сервером XML данными, нам требуется только связать вместе уже готовые инструменты.

Отлично, теперь мы представляем, что такое XML формат, и понимаем, что назначением его является передача сложных структур данных между сервером и клиентом. Следовательно, можем двигаться дальше.

Читайте также:  Бинарные опционы на валютные пары

AJAX пример №1 (Начало работы)

Приведенный ниже пример, позволит вам понять суть рассматриваемой нами технологии, и двигаться дальше к изучению более сложных примеров.

Исходный код HTML документа:

123456789101112131415161718192021222324252627282930313233343536373839404142434445 function startAjax(url){  var request;  if(window.XMLHttpRequest){      request = new XMLHttpRequest();  } else if(window.ActiveXObject){      request = new ActiveXObject(«Microsoft.XMLHTTP»);    } else {      return;  }    request.onreadystatechange = function(){        switch (request.readyState) {          case 1: print_console(«
1: Подготовка к отправке…»); break          case 2: print_console(«
2: Отправлен…»); break          case 3: print_console(«
3: Идет обмен..»); break          case 4:{           if(request.status==200){                            print_console(«
4: Обмен завершен.»);                        document.getElementById(«printResult»).innerHTML = ««+request.responseText+»«;                     }else if(request.status==404){                        alert(«Ошибка: запрашиваемый скрипт не найден!»);                     }                      else alert(«Ошибка: сервер вернул статус: «+ request.status);                        break            }        }          }    request.open ('GET', url, true);    request.send ('');  }  function print_console(text){    document.getElementById(«console»).innerHTML += text;  } Запустить php скрипт   Консоль выполнения запроса:
После нажатия на ссылку, тут будет сообщение с сервера!

В коде HTML страницы мы создаем функцию startAjax() на языке JavaScript, позволяющую реализовать задуманные действия с AJAX’ом. Кстати, о действиях, во-первых мы хотим увидеть, как отрабатывает php скрипт, находящийся на сервере.

Во-вторых, как возвращенная им информация появляется на страничке, без перезагрузки. Для этого в коде мы предусмотрели ссылку, по нажатию на которую запустится процесс всей демонстрации, консоль вывода действий JavaScript скрипта, а также блок для вывода результата.

Так вот, вернемся к создаваемой нами функции startAjax(), по строчкам я все описывать не стану, выделю лишь основные моменты, требуемые для представления происходящего.

  • Создаем объект XMLHttpRequest позволяющий получать данные с сервера в фоновом режиме.
  • Если используется IE (Браузер — Internet Explorer) тогда вместо вышеупомянутого объекта XMLHttpRequest, создаем объект ActiveXObject, смысл у них единый, отличие только в индивидуальности для IE.
  • Обрабатываем все 4-ре статуса состояния запроса. Созданный запрос он же объект request, в процессе отправкиполучения данных может принимать четыре состояния (1 — подготовка к отправке, 2 — отправлен, 3 — идет обмен, 4 — получен ответ.)
  • В случае 4-го статуса, при получении ответа от сервера, происходит проверка на тип ответа 200 — «OK» или 404 — «Not Found».
  • Событие request.open() — открывает соединение с сервером с указанием метода передачи данных, адресом запроса, и флагом асинхронности. Указав флаг как false, мы получим в результате обычную перезагрузку страницы.

Кликнув на ссылку, мы пронаблюдаем успешное выполнение простого AJAX запроса.

Разумеется, такое сообщение мы получим только после того как разместим на сервере, в той же папке, что и саму html страничку, скрипт handler_script.php:

1

Скрипт не мудрый, тем не менее, его содержимого достаточно для демонстрации.

Ну вот, с азами разобрались, перейдем от простого к сложному. Рассмотрим пример использования технологии AJAX по прямому её назначению, а именно с пересылкой данных в виде XML.

( Скачали: 1608 чел. ) 

AJAX пример №2 — отправка POST запроса на сервер

Переходя ко второму примеру, давайте уясним тот факт, что любой из запросов, отправляющийся на сервер, может иметь один из таких типов данных:

  • GET — передаёт пользовательских данные заданному ресурсу по URI.
  • POST — передаёт пользовательских данные заданному ресурсу по протоколу.
  • HEAD — аналогичен методу GET, за исключением того, что сервер ничего не посылает в информационной части ответа.
  • TRACE — возвращает всё, что было введено при запросе, включая HTTP-заголовки.
  • DELETE — Удаляет указанный ресурс.
  • PUT — загружает содержимого запроса на указанный в запросе URI.

Причем это относится не только к технологии AJAX, а в принципе ко всему протоколу HTTP.

Самыми распространенными являются два типа GET и POST, как правило, они широко используемы в отправке данных на сервер посредствам HTML элемента form.

Именно с этими типами запроса я и приведу примеры работы веб приложения на АЯКСЕ.

Для того чтобы с помощью АЯКС технологии отправить POST запрос, нужно использовать три метода объекта request:

  • open – открывает соединение с сервером с указанием метода передачи данных.
  • setRequestHeader — устанавливает заголовок запроса.
  • send — отправляет запрос.

Откройте код примера №1 и замените в нем строки:

request.open ('GET', url, true);request.send ('');

На следующие:

request.open(«POST»,url, true);request.setRequestHeader(«Content-type»,»application/x-www-form-urlencoded»);request.send(«param1=1&param2=2»);

Исполняемый на сервере php скрипт handler_script.php должен принять вид:

Вот, что получим в результате:

Как видите заданные в методе send() параметры, оказались доступными в php скрипте, а это значит, что с ними мы смогли бы сделать все что угодно, в том числе и записать данные в базу данных.

Для того чтобы использовать тип передачи GET , нужно в методе open() указать такую информацию:

1 request.open(«GET»,url+»?a1=1&a2=2″,true);

Вот что выйдет если мы передадим GET запрос:

Возможно, описание примера получилось немного сумбурным, но в принципе я считаю вполне достаточным для того, чтобы определиться с тем, как передать данные из браузера на сервер методом GET и POST.

Если у вас уважаемые читатели не все получилось сделать самостоятельно, то вы можете скачать готовый исходный код примера, и поэкспериментировать над ним:

( Скачали: 1085 чел. ) 

Технология AJAX, пример №3

Мы уже умеем отправлять данные с клиентской стороны, но пока не умеем обработать ответ сервера. В предыдущих примерах ответом являлось тестовое/html сообщение, генерируемое php скриптом. Но что делать, когда нужно передать более сложный формат данных, такой как XML?

Рассмотрим ситуацию когда, сервер возвращает ответ в XML виде:

  Mark  Avdeev  Администратор блога lifeexample.ru

Для этого нам надо создать на сервере файл data.xml и поместить в него вышеприведенный текст.

В файл handler_script.php поместите такой код:

header('Content-Type: text/xml; charset=windows-1251');echo file_get_contents('data.xml');

Данные будут сначала считаны из фала data.xml, а затем возвращены в ajax запрос в формате XML.

Чтобы обработать полученный XML формат, в технологии AJAX предусмотрены два метода работы с данными:

Метод 1:

Извлекает данные, используя имя узла.

1 request.responseXML.getElementsByTagName(«name»)[0].childNodes[0].nodeValue;

Метод 2 :

Возвращает данные используя дочерний узел.

1 proddet .getElementsByTagName(«ProductName»)[0].firstChild.data;

Второй метод проще, т.к. не вызывает путаницы с индексами узлов.

В качестве примера измените ту часть кода, что отвечает за вывод результата вот этим содержимым:

if(request.status==200){           print_console(«
4: Обмен завершен.»);    var name = request.responseXML.getElementsByTagName(«name»)[0].firstChild.data;    var famaly = request.responseXML.getElementsByTagName(«famaly»)[0].firstChild.data;    var status = request.responseXML.getElementsByTagName(«status»)[0].firstChild.data;    document.getElementById(«printResult»).innerHTML = «Имя: «+name+»
Фамилия: «+famaly+»
Статус: «+status;               }

Вот какой результат мы увидим в процессе демонстрации:

( Скачали: 1218 чел. ) 

Как вы понимаете с полученными данными можно делать все, что заблагорассудится и выводить их в любом месте HTML документа посредствам изменения DOM структуры. Что является очень важным в использовании интерактивных интерфейсов управления web-приложением.

Заключение

Скажу, что статья могла быть значительно большей, но это бы явилось эпическим перебором, и взрывом вашего уважаемые читатели мозга. Поэтому продолжение статьи еще появится на страницах моего блога, в ближайшем будущем.

В продолжении данной статьи будет рассмотрен очень важный и удобный механизм обмена данными между сервером и AJAX приложением, по средствам использования формата JSON.

Благодарю всех, кто осилил мои AJAX примеры до конца! Надеюсь, я частично раскрыл тему «Золотая технология AJAX и примеры скриптов». Жду вашей критики, уважаемые читатели.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Источник: http://LifeExample.ru/jquery-javascript-primeryi/zolotaya-tehnologiya-ajax-primeryi-skriptov.html

Динамическая загрузка контента через jQuery

В этом учебнике мы возьмем средний обычный веб-сайт и улучшим его с помощью jQuery. Мы добавим AJAX-функциональности, которая позволит содержимому динамически загружать контент, без перезагрузки страницы, в соответствующий контейнер. Вместо того, чтобы заставлять пользователя переходить на другую страницу. А также интегрируем кое-какие потрясающие анимационные эффекты.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Для примера я сначала построил очень простой макет. Вот скриншот и HTML-код, который мы будем использовать.

Бесплатный курс «Full-Stack практика»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

mmm… Ajax!    

ajax … nettuts

    Tutorial by James for NETTUTS

Шаг 1

Вначале пойдите и скачайте последний стабильный релиз jQuery и добавьте ссылку на него в ваш документ:

Как я считаю, одна из лучших черт jQuery – это его простота. Можно достичь поставленной задачи в сочетании с ошеломляющими эффектами всего несколькими строчками кода.

Во-первых, давайте загрузим библиотеку jQuery и запустим функцию, когда документ уже готов (когда DOM уже загружен).

$(document).ready(function() {

Шаг 2

Нам нужно сделать так, чтобы при нажатии на ссылку в меню навигации на нашей странице, браузер не делал переход на соответствующую страницу, а динамически загружал контент этой страницы внутрь нашего макета, без перезагрузки.

Для этого нам нужно определить ссылки в меню навигации и запускать эту функцию при щелчке на них:

$('#nav li a').click(function(){

Давайте наметим, что мы должны сделать в этой функции по порядку.

Удалить содержимое текущей страницы.

Получить новое содержимое страницы и добавить в содержимое DIV.

Вначале нам нужно определить, из какой страницы получать данные после того, как на ссылку нажали.

Все, что для этого нужно сделать – это получить атрибут ‘href’ нажатой ссылки и использовать его как адрес страницы, из которой будет загружаться информация.

Кроме того, к полученному URL необходимо добавить метку элемента, так как мы не собираемся использовать ВСЕ содержимое из запрашиваемой страницы. Вместо этого, нам требуются данные внутри разделителя div с меткой ‘content’:

var toLoad = $(this).attr('href')+' #content';

Чтобы наглядно продемонстрировать, что делает вышеуказанный код, давайте представим, что пользователь нажимает на ссылку ‘about’ , которая связана со страницей ‘about.html’ – в этой ситуации переменной будет: ‘about.

html #content’ – и это именно та переменная, которую мы будем запрашивать при простом вызове. Однако первое, с чего мы начнем – это создадим красивый эффект для содержимого текущей страницы.

Вместо того, чтобы оно просто исчезало, мы используем функцию «скрывания» jQuery:

$('#content').hide('fast',loadContent);

Указанная функция быстро «прячет» #content div, и как только эффект заканчивает свое действие, она, в свою очередь, инициирует функцию «loadContent» (загрузка нового содержимого [через ajax]) – это функция, которую мы определим позже (в шаге 4).

Шаг 3

Как только старое содержимое исчезнет с ошеломляющим эффектом, нам нельзя просто оставить пользователей в ожидании, пока не появится новое содержимое (особенно если у них медленное соединение с Интернетом), так что мы создадим немножко графики «загрузки» чтобы пользователи знали, что что-то происходит в фоновом режиме:

$('#wrapper').append('LOADING…');$('#load').fadeIn('normal');

Вот CSS, прилагающаяся к свежесозданному #load div:

background: url(images/ajax-loader.gif);

Таким образом область, которая должна содержать анимацию загрузки, первоначально не отображается. Далее, при инициализации функции fadeIn () (см. выше в коде), она начинает отображаться в верхнем правом углу сайта и показывает анимированный GIF, пока через некоторое время снова не исчезнет с экрана.


Бесплатный курс «Full-Stack практика»

Изучите курс и узнайте, как создать веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Шаг 4

Через некоторое время, когда пользователь нажмет на одну из ссылок, начнет происходить следующее:

Текущее содержание эффектно исчезает.

Появляется сообщение о загрузке.

А теперь давайте напишем ту самую функцию загрузки содержимого, о которой мы ранее говорили:

$('#content').load(toLoad,'',showNewContent)

Функция loadContent вызывает запрошенную страницу, а когда это уже выполнено, вызывает функцию ‘showNewContent’ (показ нового содержимого):

function showNewContent() {$('#content').show('normal',hideLoader);

Эта функция – showNewContent — использует функцию show() jQuery (на самом деле, это слишком скучное название для такого отличного эффекта) с тем, чтобы новое содержимое, помеченное меткой элемента ‘#content’ появилось на странице. Однажды вызванная, она инициирует функцию ‘hideLoader’ (исчезание):

$('#load').fadeOut('normal');

Нам необходимо помнить, что функция обработки клика должна возвратить «false», чтобы браузер не совершил перехода на другую страницу.

Теперь все должно работать прекрасно. Пример этого можно увидеть здесь: [LINK]

А вот и код:

$(document).ready(function() {    $('#nav li a').click(function(){    var toLoad = $(this).attr('href')+' #content';    $('#content').hide('fast',loadContent);    $('#wrapper').append('LOADING…');    $('#load').fadeIn('normal');     $('#content').load(toLoad,'',showNewContent())    function showNewContent() {     $('#content').show('normal',hideLoader());     $('#load').fadeOut('normal');

Шаг 5

Можно было бы на этом и остановиться, но если вы беспокоитесь об удобстве использования (о котором должны заботиться), важно проделать еще кое-какую работу.

Проблема нашего текущего решения в том, что оно игнорирует адреса URL.

Что, если пользователь захочет определить ссылку на одну из наших так называемых «страниц»? Сейчас это сделать невозможно, потому что URL все время один и тот же.

Самое лучшее, что можно сделать – это изменить значение метки содержимого в URL, чтобы обозначить, что именно просматривает сейчас пользователь.

Совет

Таким образом, если пользователь просматривает содержание ссылки ‘about’, то URL должен быть таким: ‘www.website.com/#about’.

Для этого нам нужно всего лишь добавить одну строчку кода в функцию ‘click’, которая будет хэшировать текущую страницу в URL при щелчке пользователя на ссылку навигации:

window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);

Вышеуказанный код изменяет значение URL на значение нажатого атрибута ‘href’ (за исключением расширения ‘.html’). Поэтому, когда пользователь щелкает ссылку ‘home’ (href=index.html), то хэш-значение будет выглядеть как ‘#index’.

Кроме того, нам необходимо сделать возможным получение нужной страницы, когда URL написан в адресной строки браузера. Чтобы это работало, мы проверяем хэш-значение во время загрузки страницы и соответственно изменяем содержимое:

var hash = window.location.hash.substr(1);var href = $('#nav li a').each(function(){    var href = $(this).attr('href');    if(hash==href.substr(0,href.length-5)){        var toLoad = hash+'.html #content';        $('#content').load(toLoad)

Итак, вот весь необходимый код на javascript (и библиотека jQuery):

$(document).ready(function() {    // Check for hash value in URL    var hash = window.location.hash.substr(1);    var href = $('#nav li a').each(function(){        var href = $(this).attr('href');        if(hash==href.substr(0,href.length-5)){            var toLoad = hash+'.html #content';            $('#content').load(toLoad)    $('#nav li a').click(function(){    var toLoad = $(this).attr('href')+' #content';    $('#content').hide('fast',loadContent);    $('#wrapper').append('LOADING…');    $('#load').fadeIn('normal');    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);     $('#content').load(toLoad,'',showNewContent())    function showNewContent() {     $('#content').show('normal',hideLoader());     $('#load').fadeOut('normal');

Конец…

Достоинство этого метода заключается в том, что он гибок и может быть прикручен к сайту в считанные минуты. Он неназойлив и ваш сайт будет работать нормально и при выключенном javascript.

На этом, выпуск посвящённый созданию динамической загрузки контента, без перезагрузки страницы, средствами AJAX и jQuery, завершен.

Посмотреть полностью работающий пример

Источник: https://webformyself.com/kak-dinamicheski-zagruzhat-i-animirovat-zagruzku-soderzhimogo-s-pomoshhyu-jquery/

Создание превью изображений с помощью HTML5 File API и jQuery и отправка их на сервер с использованием AJAX

Содержание:

1. Множественный выбор файлов, создание превью на стороне клиента и отправка данных ajax-ом на сервер

В примере представлен код для множественного выбора файлов, их валидации (проверка на формат и размер) и загрузки их с помощью ajax на сервер.

Подключаем jQuery

Форма для выбора, отображения и отправки файлов:

            

            

  •                             Удалить            

JS код создания превью и отправки формы:

jQuery(document).ready(function ($) {     var maxFileSize = 2 * 1024 * 1024; // (байт) Максимальный размер файла (2мб)     var form = $('form#uploadImages');     var imagesList = $('#uploadImagesList');     var itemPreviewTemplate = imagesList.find('.item.template').clone();     itemPreviewTemplate.removeClass('template');     imagesList.find('.item.template').remove();     $('#addImages').on('change', function () {         for (var i = 0; i maxFileSize ) {                 alert( 'Размер фотографии не должен превышать 2 Мб' );         var reader = new FileReader();         reader.addEventListener('load', function(event) {             var img = document.createElement('img');             var itemPreview = itemPreviewTemplate.clone();             itemPreview.find('.img-wrap img').attr('src', event.target.result);             itemPreview.data('id', file.name);             imagesList.append(itemPreview);         reader.readAsDataURL(file);     imagesList.on('click', '.delete-link', function () {         var item = $(this).closest('.item'),     form.on('submit', function(event) {         var formData = new FormData(this);             formData.append('images[]', queue[id]);             url: $(this).attr('action'),             success: function (res) {

Демо (выберите изображения, для которых нужно создать превью):Данные из примера на сервер попадут в следующем виде:Стили, используемые в примере:

    #uploadImagesList .item {    #uploadImagesList .item .img-wrap {    #uploadImagesList .item .img-wrap img{    #uploadImagesList .item .delete-link {

2. Добавляем прогресс-бар

Добавляем в код формы html-код прогресс-бара:

        0%

Добавляем css-код:

#progress-bar .progress-bg {#progress-bar .progress-val {

JS-код:

form.on('submit', function(event) {    var formData = new FormData(this);        formData.append('images[]', queue[id]);        url: $(this).attr('action'),            var xhr = new window.XMLHttpRequest();            var progressBar = $('#progress-bar'),                progressBg = progressBar.find('.progress-bg'),                progressVal = progressBar.find('.progress-val');            xhr.upload.addEventListener(«progress», function(evt){                if (evt.lengthComputable) {                    var percentComplete = evt.loaded / evt.total;                    percentComplete = (percentComplete * 100).toFixed();                    progressBg.css('width', percentComplete + '%');                    progressVal.text(percentComplete + '%');                    // console.log(percentComplete);        success: function (res) {

Результат:Подробнее про индикацию прогресса в JS.

3. Готовые решения для загрузки изображений на сервер

DropzoneJS — создаёт область для перетаскивания файлов и загружает их на серверjQuery.fileapi — библиотека для работы с FileAPI от mail.ru#ajax#html5#jquery#js

Источник: https://codd-wd.ru/sozdanie-prevyu-izobrazhenij-s-pomoshhyu-html5-file-api-i-jquery/

Ajax-запрос к серверу через jQuery

В этой статье примеры кода, которые я использую, для отправки ajax-запросов к серверу через jQuery. Их задачи могут быть разными, поэтому под них можно использовать разные функции, которые упрощают написание кода.

Запрос html-данных с помощью функции Load

Это самый простой ajax-запрос через jQuery с получением html-данных и их вставкой в dom-элемент с id=»result» (содержимое элемента заменяется):

$('#result').load('');

Более продвинутый вариант использования load:

$('#result').load('', {par1:val1, par2:val2, …}, function(response, status, xhr) { if (status == 'success') { alert('Готово'); } else { alert('Ошибка: ' + xhr.status + ' ' + xhr.statusText); } });

В этом примере серверу так же передаются параметры, а после получения ответа проверяется не было ли ошибки (например, ответ от сервера не был получен) и выполнение различных действий.

Ajax-запросы функциями GET и POST

Эти функции осуществляют отправку ajax запроса http-методами get и post. Приведу пару примеров их использования.

$.get( '', // адрес отправки запроса {par1:val1, par2:val2, …}, // передача с запросом каких-нибудь данных function(data) { // какие-то действия с полученными от сервера данными data } );

Передача данных не обязательна, как и выполнение каких-либо действий после получения ответа от сервера, т.е. в этом случае, строчки 3 и 4-6 можно удалить при необходимости и таким образом еще сократить код.

Тип получаемых от сервера данных можно указать, добавив dataType (см.ниже) — по-умолчанию определяется автоматически.

Использование post аналогично, но в следующем примере использую вызов функции после получения ответа от сервера.

$.post( '', {par1:val1, par2:val2, …}, onSuccess ); function onSuccess(data) { // какие-то действия с полученными от сервера данными data }

На самом деле, функции get и post являются сокращенными вариантами функции ajax, которую рассмотрю ниже.

Получение json-данных с помощью getJSON

getJSON — укороченный вариант ajax-запроса методом GET и получением данных в виде json. Способ удобен, например, для получения какого-то массива с данными и последующей работы с ним.

$.getJSON('', {par1:val1, par2:val2, …}).success(function(data) { // что-то делаем с данными, например, обходим их в цикле и выводим: for (var i=0; i 10, 'text' => 'тестовая строка 1'); $arr[1] = array('id' => 20, 'text' => 'тестовая строка 2'); $arr[2] = array('id' => 30, 'text' => 'тестовая строка 3'); echo json_encode($arr);

Точно так же можно передать с сервера и объекты stdClass, преобразовав их в json-строку.

Простой ajax-запрос через jQuery с помощью функции AJAX

Теперь приведу пример простого get запроса функцией ajax и получением html-данных.

$.ajax({ url: '', dataType: 'html', success: function(data) { // какие-то действия с полученными данными data } });

Запрос к серверу происходит get-методом, т.к. параметр, отвечающий за тип запроса, type по-умолчанию равен GET.

Более сложный пример ajax-запроса через jQuery

Пример выполнения запроса функцией ajax с передачей данных post методом и обработкой событий. Ниже опишу дополнительные параметры, которые чаще всего применяются.

$.ajax({ url: '', type: 'post', data: '', // можно строкой, а можно, например, так: $('input[type=»text»], input[type=»radio»]:checked, input[type=»checkbox»]:checked, select, textarea') dataType: 'json', beforeSend: function() { $('#sendajax').button('loading'); }, complete: function() { $('#sendajax').button('reset'); }, success: function(json) { // какие-то действия с полученными данными }, error: function(xhr, ajaxOptions, thrownError) { alert(thrownError + »
» + xhr.statusText + »
» + xhr.responseText); } });

Кнопка отправки данных:

Отправить

В приведенном примере при нажатии на кнопку button, сначала меняется состояние кнопки (текст на ней меняется на «Отправка…» и она становится не активной), что делается при помощи параметра beforeSend.

Затем происходит отправка запроса с передачей нужных данных. После того, как получен ответ от сервера состояние кнопки возвращается в прежнее (текст меняется на «Отправить», становится активной).

Ответ получается в виде json-данных.

Коротко опишу параметры отправки ajax-запроса, которые чаще всего могут пригодиться:

url Адрес отправки ajax-запроса
type Способ отправки запроса GET или POST
data Отправляемые серверу данные. Может быть строка с параметрами и их значениями в формате par1=val1&par2=val2&…, объект jQuery, например, $('input[type=»text»]') или другие данные.
dataType Тип получаемых от сервера данных. Может быть html, json, text, script и xml.
cache Кэширование браузером запроса (false — не кэшировать).
async Асинхронное выполнение запроса, т.е. программа продолжает выполняться не дожидаясь ответа сервера. Если указать false, то запрос будет выполнен синхронно, при этом страница не будет ни на что реагировать, пока не будет получен ответ от сервера.
processData Преобразование отправляемых данных в url-формат. Если нужно чтобы данные не преобразовывались, установить в false. Например, при отправке изображения на сервер или xml-данных.
contentType Тип передаваемых данных, по умолчанию «application/x-www-form-urlencoded; charset=UTF-8». Если указать false, то в заголовке не будет передаваться тип, что может быть необходимо, например, при отправке изображения на сервер.
beforeSend Функция, выполняемая перед отправкой ajax-запроса.
complete Функция, выполняемая после получения ответа от сервера (любого, успешного или нет).
success Функция, выполняемая при удачном выполнении запроса.
error Функция, выполняемая в случае ошибки.

Ниже приведу еще несколько примеров использования ajax-запросов.

Отправка формы со всеми данными ajax-запросом через jQuery

Примерный код html-формы:

Ваше имя:

JavaScript код:

$('#myform').submit(function(e) { e.preventDefault(); $.ajax({ type: $(this).attr('method'), url: '', data: $(this).serialize(), async: false, dataType: «html», success: function(result){ alert('Форма отправлена'); } }); });

Для того чтобы страница не перезагружалась при нажатии на кнопку «submit», сначала отменяем стандартые действия браузера использовав e.preventDefaults().

В параметре data мы передаем все поля формы использовав $(this).serialize() — эта функция преобразует все input-ы и select-ы в строку, пригодную для отправки на сервер.

Так же, здесь использован параметр async: false, чтобы пока форма не отправится на сервер больше ничего нельзя было нажать или сделать.

Отправка изображения или файла ajax-запросом через jQuery

Задача отправки файла или изображения на сервер без перезагрузки страницы довольно часто возникает. В этом примере разберу сразу 2 фишки: выбор файла по нажатию на кнопку, которая может быть оформлена как угодно, и отображение прогресса при передаче файла на сервер ajax-запросом.

html-код будет такой:

Загрузить изображение

css код:

#addfile { position: relative; overflow: hidden; width: 180px; height: 34px; } #load_file { position: absolute; top: 0; left: 0; width: 180px; height: 34px; font-size: 0px; opacity: 0; filter: alpha(opacity:0); } #load_file:hover { cursor: pointer; }

Суть идеи в том, что поверх кнопки выводится стандартный input для выбора файла, но он полностью прозрачен и имеет такие же размеры как кнопка.

Таким образом, пользователь видит кнопку button, но когда наводит на нее курсор, фактически наводит на input. Соответственно, когда он нажимает на кнопку, на самом деле нажимается input выбора файла.

Для того, чтобы не мигал курсор после выбора файла, размер шрифта задан 0px.

Теперь javascript код отправки файла на сервер с отображением прогресса:

$(function() { $('#load_file').on('change', loadfile); }); function loadfile() { $('#addfile span').html('Загружено 0 %'); files = $('#load_file')[0].files; var form = new FormData(); form.append('upload', files[0]); $.ajax({ url: '', type: 'POST', data: form, cache: false, processData: false, contentType: false, xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload) { myXhr.upload.addEventListener('progress',ShowProgress, false); } return myXhr; }, complete: function(data){ $('#addfile span').html('Загрузить изображение'); $('#load_file').val(''); }, success: function(message){ alert(message); }, error: function(jqXHR, textStatus, errorThrown) { alert(textStatus+' '+errorThrown); } }); } function ShowProgress(e) { if(e.lengthComputable){ $('#addfile span').html('Загружено '+Math.round(100*e.loaded/e.total)+' %'); } }

Обратите внимание

При загрузке файла на сервер в кнопке будет показываться сколько % уже передано на сервер. После завершения загрузки название кнопки возвращается как было, а значение input-а с файлом устанавливается пустым, чтобы можно было снова выбирать новый файл.

Пример серверной части на php (по просьбе Евгения):

$message = ''; if (empty($_FILES['upload']['name']) || $_FILES['upload'] == «none») { $message = 'Вы не выбрали файл'; } else if ($_FILES['upload']['size'] == 0 || $_FILES['upload']['size'] > 9437184) { $message = 'Размер файла не соответствует нормам (максимум 9 Мб)'; } else if (($_FILES['upload']['type'] != 'image/jpeg') && ($_FILES['upload']['type'] != 'image/pjpeg') && ($_FILES['upload']['type'] != 'image/gif') && ($_FILES['upload']['type'] != 'image/png')) { $message = 'Допускается загрузка только картинок JPG, GIF и PNG.'; } else if (!is_uploaded_file($_FILES['upload']['tmp_name'])) { $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.'; } else { $ftype = $_FILES['upload']['type']; $fname = 'newname_image.'.($ftype == 'image/gif' ? 'gif' : ($ftype == 'image/png' ? 'png' : 'jpg')); if (move_uploaded_file($_FILES['upload']['tmp_name'], $_SERVER['DOCUMENT_ROOT'].'/files/'.$fname)) { $message = 'Изображение успешно загружено.'; } else { $message = 'Что-то пошло не так. Попытайтесь загрузить файл ещё раз.'; } } exit($message);

Информация о загруженном изображении будет содержаться в $_FILES['upload'], т.к. скриптом файл добавлялся так: form.

append('upload', files[0]); Соответственно, всё что требуется от php-программы — это проверить что файл соответствует ожидаемым параметрам, перенести файл в нужную папку (в примере в папку files) под нужным именем (в примере newname_image) и вернуть в браузер ответ, который в моем примере просто выводится пользователю командой alert(message);

Ситуаций, в которых можно и даже нужно использовать ajax-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.

Источник: http://www.codernotes.ru/articles/javascript-jquery/ajax-zapros-k-serveru-cherez-jquery.html

JavaScript — Асинхронные AJAX запросы на примерах

Пример работы AJAX

Рассмотрим последовательность действий, которые необходимо выполнить на стороне клиента (в коде JavaScript):

  1. Подготовим данные, необходимые для выполнения запроса на сервере. Если для выполнения запроса на сервере данные никакие не нужны, то данный этап можно пропустить.

  2. Создадим переменную, которая будет содержать экземпляр объекта XHR (XMLHttpRequest).

  3. Настроим запрос с помощью метода open().

    Указываются следующие параметры:

    • Метод, с помощью которого будет посылаться запрос на сервер (GET, POST).
    • URL-адрес, который будет обрабатывать запрос на сервере.
    • Тип запроса: синхронный (false) или асинхронный (true).
    • Имя и пароль при необходимости.
  4. Подпишемся на событие onreadystatechange объекта XHR и укажем обработчик в виде анонимной или именованной функции. После этого создадим код внутри этой функции, который будет проверять состояние ответа, и выполнять определённые действия на странице. Ответ, который приходит с сервера, всегда находится в свойстве responseText.

    Дополнительно с проверкой значения свойства readyState числу 4, можно проверять и значение свойства status. Данное свойство определяет статус запроса. Если оно равно 200, то всё OK. А иначе произошла ошибка (например, 404 – URL не найден).

  5. Отправим запрос на сервер с помощью метода 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

На сервере (с помощью php):

  1. Получим данные. Если данные посланы через метод GET, то из глобального массива $_GET['имя']. А если данные переданы с помощью метода POST, то из глобального массива $_POST['имя'].
  2. Используя эти данные, выполним некоторые действия на сервере. В результате которых получим некоторый ответ. Выведем его с помощью echo.

Источник: https://itchief.ru/lessons/javascript/ajax-asynchronous-requests-in-the-examples

Ссылка на основную публикацию