В предыдущей части я описал шаблон, который формирует начальную веб-страницу, через которую можно отправить данные из поля input в конфигурацию через ajax и получить ответ без перезагрузки страницы.
Кроме текстового содержимого можно выводить изображения и двоичные файлы для скачивания. Для этого создадим еще один шаблон URL src с двумя методами GET и POST и обработчик к нему. В модуль менеджера обработки включим функцию для получения изображений:
Функция srcПолучить(Запрос)
Ответ = Новый HTTPСервисОтвет(200);
Если Запрос.ПараметрыURL["BIN"]="1" Тогда
Ответ.УстановитьТелоИзДвоичныхДанных(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Ложь));
Иначе
Ответ.УстановитьТелоИзСтроки(Обработки.HTTP_ОбработкаСервиса.ПолучитьДвоичныеДанные(Запрос.ПараметрыURL["ID_SRC"],Истина));
КонецЕсли;
Возврат Ответ;
КонецФункции
Функция ПолучитьДвоичныеДанные(Идентификатор,Base64=Ложь) Экспорт
Если Base64 Тогда
возврат Base64Строка(БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные());
Иначе
возврат БиблиотекаКартинок[Идентификатор].ПолучитьДвоичныеДанные();
КонецЕсли;
КонецФункции
Здесь используется сложный шаблон URL чтобы передать два параметра - формат получения картинки (двоичный или строкой base64) и имя картинки в библиотеке картинок.
Включим в конфигурацию две общие картинки МояКартинка1 и МояКартинка2.
Дополним текст HTML начальной страницы "Получить картинку" и изменим макет JS, добавив два фрагмента:
<!-- Статическая картинка при загрузке страницы-->
<div><img src="src/1/МояКартинка1"></div>
<!-- Кнопка и область для интерактивной загрузки изображения-->
<button type="submit"
id="ImgButton"
style="top: 8px; left: 0px; height: 21px; width: 150px;"
_onclick="GetImage('МояКартинка2')">
Получить картинку
</button>
<div id="content_img">
</div>
Если начальную страницу формируем из макета "HTML документ", то добавим в $(document).ready фрагмент для инициализации
$('img').each(function(i,elem) {
$(elem).attr('src',cur_url+"/"+$(elem).attr('src'))
});
И функцию для получения изображения
function GetImage(img_name)
{
$.ajax({
type: "POST",
url: cur_url+"/src/2/"+img_name,
cache: false,
success: function(res){
$("#content_img").html("<img src='data:image/png;base64,"+res+"'>");
}
});
}
Изменять атрибут src на абсолютный необходимо в случае, если вы использовали для хранения макет "HTML Документ", так как при вызове метода ПолучитьТекст() 1С подставляет в заголовок страницы фиксированный абсолютный адрес (что-то вроде <base href="v8config://811089b6-4d46-4837-8d19-b992f162542f/mdobject/id07b27b2d-6393-47c9-8641-307eadff3798").
Перезапускаем веб-сервер и обновим страницу. При загрузке сразу же отобразится изображение МояКартинка1. При нажатии кнопки "Получить картинку" зарузится МояКартинка2, без полной загрузки страницы. Хочу обратить внимание, что вторая картинка приходит с сервера в виде Base64-строки. Таким способом можно в качестве результата возвращать сразу несколько значений в формате JSON или XML, например название, цену, количество и изображение товара (см. ajax-запрос из первой части)
Для отправки файла из браузера на сервер также будем использовать формат base64.
Добавим следующий текст HTML и функцию JavaScript.
<div>
<input type="file" id="file">
<button
<div id="status"></div>
</div>
JavaScript
function SendFile()
{
var reader = new FileReader();
reader.readAsDataURL($("#file")[0].files[0]);
reader.onload = function () {
$.ajax({
type: "POST",
url: cur_url+"/ajax",
data: JSON.stringify(
{action: "SendFile",
name: $("#file")[0].files[0].name,
file: reader.result.split('base64,')[1]
}),
cache: false,
success: function(html){
$("#status").html(html);
}
});
};
}
И изменим созданную в первой части функцию в модуле менеджера обработки:
Функция ОбработатьЗапросAjax(СтруктураJSON) Экспорт
Если СтруктураJSON.action="SendFile" Тогда
Попытка
ДД=Base64Значение(СтруктураJSON.file);
ДД.Записать("D:\"+СтруктураJSON.name);
Контент="<font color='green'>Файл успешно Принят</font>";
Исключение
Контент="<font color='red'>"+ОписаниеОшибки()+"</font>";
КонецПопытки;
Иначе
Контент="Вы ввели <b>"+
СтруктураJSON.t+
"</b>";
КонецЕсли;
возврат Контент;
КонецФункции
Теперь функция ОбработатьЗапросAJAX() будет обрабатывать данные и возвращать различный результат в зависимости от значения свойства action. В этом примере для простоты файл записывается из двоичных данных на диск. Однако можно использовать, например, процедура БСП РаботаСФайлами.ДобавитьФайл() для записи файла в информационную базу.
Заключение.
Описанный вариант использования HTTP-сервиса можно использовать для простых задач, например, заполнение анкет и отправка файла с мобильного устройства для обработки, вывод какого-нибудь отчета/диаграммы на большой монитор с обновлением через определенный интервал и т.п. Более сложные веб-приложения лучше реализовать другими средствами, а http-сервис использовать только для обмена
