Error function xhr ajaxoptions thrownerror

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

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

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

$('#result').load('<url-адрес>');

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

$('#result').load('<url-адрес>', {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(
  '<url-адрес>',          // адрес отправки запроса
  {par1:val1, par2:val2, ...},  // передача с запросом каких-нибудь данных
  function(data) {              
    // какие-то действия с полученными от сервера данными data
  }
);

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

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

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

$.post(
  '<url-адрес>',
  {par1:val1, par2:val2, ...},
  onSuccess
);

function onSuccess(data) {
  // какие-то действия с полученными от сервера данными data
}

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

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

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

$.getJSON('<url-адрес>', {par1:val1, par2:val2, ...}).success(function(data) {
  // что-то делаем с данными, например, обходим их в цикле и выводим:
  for (var i=0; i<data.length; i++) {
    console.log(data[i].text);
  }
}).error(function(xhr, textStatus, errorThrown) {
  alert('Ошибка: ' + textStatus+' '+errorThrown);
});

На стороне сервера программа формирует массив и преобразовывает его в json-строку, например, так:

$arr = array();
$arr[0] = array('id' => 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: '<url-адрес>',
  dataType: 'html',
  success: function(data) {
    // какие-то действия с полученными данными data
  }
});

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

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

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

$.ajax({
  url: '<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 + "rn" + xhr.statusText + "rn" + xhr.responseText);
  }
});

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

<button class="btn btn-primary" data-loading-text="Отправка..." id="sendajax" type="button">Отправить</button>

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

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

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

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

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

<form id="myform" action="" method="POST">
  <label for="user_name">Ваше имя:</label>
  <input name="user_name" value="" type="text" />
  <input type="submit" value="Отправить">
</form>

JavaScript код:

$('#myform').submit(function(e) {
  e.preventDefault();
  $.ajax({
    type: $(this).attr('method'),
    url: '<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-код будет такой:

<button id="addfile"><span>Загрузить изображение</span><input type="file" id="load_file" value=""></button>

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: '<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-запросы, очень много и все их здесь не разобрать. Тем не менее, если есть предложения, какие еще примеры имеет смысл сюда добавить, пишите в комментариях.

Эта функция в основном генерирует уникальный случайный ключ API, и в случае, если это не так, появляется всплывающее диалоговое окно с сообщением об ошибке.

На странице просмотра:

<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-storename"><?php echo $entry_storename; ?></label>
    <div class="col-sm-6">
        <input type="text" class="apivalue"  id="api_text" readonly name="API" value="<?php echo strtoupper(substr(md5(rand().microtime()), 0, 12)); ?>" class="form-control" />                                                                    
        <button type="button" class="changeKey1" value="Refresh">Re-Generate</button>
    </div>
</div>

<script>
$(document).ready(function(){
    $('.changeKey1').click(function(){
          debugger;
        $.ajax({
                url  :"index.php?route=account/apiaccess/regenerate",
                type :'POST',
                dataType: "json",
                async:false,
                contentType: "application/json; charset=utf-8",
                success: function(data){
                  var result =  data.sync_id.toUpperCase();
                        if(result){
                          $('#api_text').val(result);
                        }
                  debugger;
                  },
                error: function(xhr, ajaxOptions, thrownError) {
                  alert(thrownError + "rn" + xhr.statusText + "rn" + xhr.responseText);
                }

        });
    });
  });
</script>

С контроллера:

public function regenerate(){
    $json = array();
    $api_key = substr(md5(rand(0,100).microtime()), 0, 12);
    $json['sync_id'] = $api_key; 
    $json['message'] = 'Successfully API Generated';
    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));
}

Необязательный параметр обратного вызова указывает функцию обратного вызова, запускаемую после завершения метода load (). Функция обратного вызова может иметь разные параметры:

Тип: Функция (jqXHR jqXHR, String textStatus, String errorThrown)

Функция, вызываемая в случае сбоя запроса. Функция получает три аргумента: объект jqXHR (в jQuery 1.4.x, XMLHttpRequest), строку, описывающую тип произошедшей ошибки, и необязательный объект исключения, если таковая произошла. Возможные значения для второго аргумента (помимо нуля): «тайм-аут», «ошибка», «прерывание» и «ошибка синтаксического анализа». Когда возникает ошибка HTTP, errorThrown получает текстовую часть статуса HTTP, например «Не найден» или «Внутренняя ошибка сервера». Начиная с jQuery 1.5, параметр ошибки может принимать массив функций. Каждая функция будет вызываться по очереди. Примечание. Этот обработчик не вызывается для междоменных скриптов и междоменных запросов JSONP.

Эта функция в основном генерирует уникальный случайный ключ API, а если нет, то появляется всплывающее диалоговое окно с сообщением об ошибке

На странице просмотра:

<div class="form-group required">
    <label class="col-sm-2 control-label" for="input-storename"><?php echo $entry_storename; ?></label>
    <div class="col-sm-6">
        <input type="text" class="apivalue"  id="api_text" readonly name="API" value="<?php echo strtoupper(substr(md5(rand().microtime()), 0, 12)); ?>" class="form-control" />                                                                    
        <button type="button" class="changeKey1" value="Refresh">Re-Generate</button>
    </div>
</div>

<script>
$(document).ready(function(){
    $('.changeKey1').click(function(){
          debugger;
        $.ajax({
                url  :"index.php?route=account/apiaccess/regenerate",
                type :'POST',
                dataType: "json",
                async:false,
                contentType: "application/json; charset=utf-8",
                success: function(data){
                  var result =  data.sync_id.toUpperCase();
                        if(result){
                          $('#api_text').val(result);
                        }
                  debugger;
                  },
                error: function(xhr, ajaxOptions, thrownError) {
                  alert(thrownError + "rn" + xhr.statusText + "rn" + xhr.responseText);
                }

        });
    });
  });
</script>

От контроллера:

public function regenerate(){
    $json = array();
    $api_key = substr(md5(rand(0,100).microtime()), 0, 12);
    $json['sync_id'] = $api_key; 
    $json['message'] = 'Successfully API Generated';
    $this->response->addHeader('Content-Type: application/json');
    $this->response->setOutput(json_encode($json));
}

Опциональный параметр обратного вызова указывает функцию обратного вызова, которая должна выполняться при завершении метода load(). Функция обратного вызова может иметь разные параметры:

Тип: Функция (jqXHR jqXHR, String textStatus, String errorThrown)

Функция, вызываемая, если запрос терпит неудачу. Функция получает три аргумента: объект jqXHR (в jQuery 1.4.x, XMLHttpRequest), строка, описывающая тип возникшей ошибки и необязательный объект исключения, если это произошло. Возможные значения для второго аргумента (кроме нуля) — это «тайм-аут», «ошибка», «прервать» и «parsererror». При возникновении ошибки HTTP errorThrown получает текстовую часть статуса HTTP, например «Not Found» или «Internal Server Error». Начиная с jQuery 1.5, параметр ошибки может принимать массив функций. Каждая функция будет вызываться по очереди. Примечание. Этот обработчик не вызывается для междоменного скрипта и междоменных запросов JSONP.

От автора: благодаря тому, что в ядре OpenCart присутствует библиотека JQuery, работа с Ajax становится крайне простой. На деле же, по всем файлам фреймворка разбросаны небольшие, но значимые вкрапления на JQuery. В этой статье мы создадим веб-страницу и продемонстрируем с ее помощью работу Ajax в OpenCart.

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

Предполагается, что вы работаете из-под последней версии OpenCart 2.1.x.x! Так как основная тема статьи это взаимодействие Ajax и OpenCart, я быстро расскажу про разработку собственных модулей в OpenCart. И даже если вы совсем не понимаете, о чем идет речь, вам на помощь придут небольшие объяснения кода в комментариях, чтобы вы смогли дойти с нами до конца статьи!

Быстрый взгляд на организацию файлов

По-быстрому рассмотрим необходимые файлы нашей страницы.

Краткий список файлов, с которыми мы будем работать.

Создаем файлы модуля

Давайте продолжим и создадим файл catalog/controller/ajax/index.php и скопируем в него следующий код.

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

После загрузки модели товаров с помощью метода getProducts мы загружаем все товары. В конце мы подходим к методу index, задав index.tpl, как в нашем файле основного шаблона.

Следом идет крайне важный метод ajaxGetProduct, с помощью которого строится блок с данными о товаре по его идентификатору, передаваемому в Ajax метод (это мы совсем скоро увидим в файле шаблона). Данный метод загружает ту же самую модель, что и метод index, но кроме этого он еще и запускает функцию getProduct, которая вытягивает информацию о товаре по его ID.

В конце в качестве шаблона для данного метода задается шаблон product.tpl. В рамках нашего примера мы используем шаблон для создания ответа из Ajax’а, но вы вполне можете воспользоваться JSON строкой.

Едем дальше, создадим файл языка catalog/language/english/ajax/index.php, в котором будем хранить простые подписи.

В рамках данного урока файл шаблона представления важнее остальных. Его необходимо создать в директории catalog/view/theme/default/template/ajax/index.tpl и скопировать в него код ниже.

Нас интересует нижняя часть файла index.tpl, а именно JS код, в котором используются методы JQuery для прикрепления события change и Ajax. После выбора пользователем товара из выпадающего списка запускается событие change, которое сразу же запускает Ajax. В методе ajax к строке запроса GET мы прикрепляем переменную product_id.

Однако как мы уже упоминали выше в настройках контроллера, метод ajaxGetProduct посылает XHTML код блока с дополнительными данными о товаре на основе его product_id. В методе success мы прикрепляем XHTML ответ к тегу DIV с идентификатором product_summary.

И осталось создать последний файл catalog/view/theme/default/template/ajax/product.tpl со следующим кодом для вызова Ajax.

Ничего особенного – самый обычный блок с дополнительной информацией о товаре на XHTML. Итак, копаться в файлах мы закончили. В следующей части мы перейдем к front-end тестам, созданной нами страницы.

Front-end тестирование

С самой сложной частью мы справились, теперь нужно протестировать, что у нас получилось! Перейдите в раздел front-ennd в //www.yourstore.com/index.php?route=ajax/index. Перед вами должен появиться красивый интерфейс, как на скриншоте.

Это наша страница, на которой отображается выпадающий список со всеми товарами. Давайте выберем товар из списка, что должно вызвать Ajax запрос. Прямо под списком появляется довольно красивый блок с общей информацией о товаре.

Если вы делали все точно, как я сказал, то у вас не должно возникнуть проблем. Данный пример довольно простой и показывает лишь базовое взаимодействие Ajax и OpenCart, но вы всегда можете его расширить под свои требования.
Попробуйте поиграться с кодом, создайте что-то интерактивное с помощью Ajax. Это лучший способ понять технологию. На сегодня все, немного позже я расскажу про более увлекательные технологии.

Заключение

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

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

Надеюсь, статья была для вас информативной и полезной. Не стесняйтесь задавать вопросы и оставлять комментарии!

Автор: Sajal Soni

Источник: //code.tutsplus.com/

Редакция: Команда webformyself.