Как правильно отобразить GIF после запроса AJAX?

Получаю с помощью API штрихкод, отправляя GET запрос:
<?php
$result_get = '';

foreach ($_GET as $key => $value) {
    $result_get = $result_get . $key . "=" . $value . "&";
}

function Send ($url) {
    
    $ch = curl_init();
    $useragent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36";

    $arrSetHeaders = array(
        "User-Agent: $useragent",
        'Content-Type: application/json',
        'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
        'Accept-Language: en-US,en;q=0.5',
        'Accept-Encoding: deflate, br',
        'Connection: keep-alive',
        'cache-control: max-age=0',
    );        
    
    curl_setopt($ch, CURLOPT_HTTPHEADER, $arrSetHeaders);    
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);    
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 45);

    $result = curl_exec($ch);
    curl_close($ch);        
    
    return $result;
}

$link = "https://barcode.tec-it.com/barcode.ashx?" . $result_get;
$zapros = Send($link);

header('Content-Type: image/gif');
echo $zapros;

?>

В PHP ставлю заголовок image/gif и если к нему обратиться, он правильно отображает картинку.
Я же пытаюсь запросом через AJAX сделать тоже самое, но получаю вот это:

GIF89a8d�3f���++3+f+�+�+�UU3UfU�U�U���3�f��������3�f��������3�fՙ������3�f������3333f3�3�3�3+3+33+f3+�3+�3+�3U3U33Uf3U�3U�3U�3�3�33�f3��3��3��3�3�33�f3��3��3��3�3�33�f3ՙ3��3��3�3�33�f3��3��3��ff3fff�f�f�f+f+3f+ff+�f+�f+�fUfU3fUffU�fU�fU�f�f�3f�ff��f��f��f�f�3f�ff��f��f��f�f�3f�ffՙf��f��f�f�3f�ff��f��f����3�f���̙��+�+3�+f�+��+̙+��U�U3�Uf�U��U̙U�����3��f�����̙������3��f�����̙������3��f�ՙ��̙������3��f�����̙����3�f�������+�+3�+f�+��+��+��U�U3�Uf�U��U��U�̀̀3̀f̀�̀�̀�̪̪3̪f̪�̪�̪�����3��f�ՙ����������3��f�����������3�f�������+�+3�+f�+��+��+��U�U3�Uf�U��U��U�����3��f�������������3��f�������������3��f�ՙ����������3��f���������!��,8d��o���"\�P!Á��"ʼn#��pcŁ7f�r�D�+�I�dK�?r93eH�7k^���ɋm����'ωA_�� �S�Hs��9�)J�W��T�ҦМ_���դh���z�lT�F�nM��)Y�%�z���.ֻ.���үڲLi����˺[��Zv�V�CB���S͌�Z�6o\�Z9c��3�ʼn{���j�y��:.綹�K�=�-h�;�^i<�d٥��m-4t⛹� ޜw�ɉ��v �8���oWw^�-���g��;������wo=��Ӧ�&^d�)��{���p��F�jk���n��w�a�!n��U_>Hف�e��q�5Xs���s*h�eB��p�b�5G\x��g�x�]&_g҅�"���h

Делаю так:
HTML
<div class="contact-info">
      <h3 class="text-center mt-mobile-2">Результат</h3>
           <div class="rounded bg-white shadow-dark padding-10 text-center">
                  <div id="barcode"></div>
    	   </div>                        
</div>

JS:
$.ajax({
  url: "/handlers/barcode.php",
  type: "get",
  data: {
    data: 'ABC-abc-1239',
    code: 'Code128',
  },
  success: function(response) {
    console.log(response)
    $('#barcode').html(response);
  },
  error: function(xhr) {
    console.log('Ошибка запроса')
  }
});

Подскажите, как мне получить в response не текст, а отобразить именно картинку, которая получается в php.
  • Вопрос задан
  • 64 просмотра
Решения вопроса 1
ThunderCat
@ThunderCat Куратор тега JavaScript
{PHP, MySql, HTML, JS, CSS} developer
Я же пытаюсь запросом через AJAX сделать тоже самое, но получаю вот это:
Ну так а что ты хотел получить то? Получил содержимое файла гиф.

Подскажите, как мне получить в response не текст,
Никак, респонс в любом случае умеет получать только текст.
а отобразить именно картинку, которая получается в php.
Либо возвращать линк на сохраненный на своем сервере файл, либо кодировать в бэйс64, ну и после уже создавать имг с срц=респонс.

Вообще слабо понимаю зачем там аякс, тупо вместе где должна быть картинка ставите линк на свой файл с запросом к апи, и туда же гетом передаете ваши дата и код. Типа:
<div class="contact-info">
      <h3 class="text-center mt-mobile-2">Результат</h3>
           <div class="rounded bg-white shadow-dark padding-10 text-center">
                  <div id="barcode">
                       <img src="/mybarcodeapigetter.php?data=ABC-abc-1239&code=Code128">
                  </div>
    	   </div>                        
</div>


Тут вообще отдельная ржака:
foreach ($_GET as $key => $value) {
    $result_get = $result_get . $key . "=" . $value . "&";
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Как-то так:
$.ajax({
  url: "/handlers/barcode.php",
  type: "get",
  xhrFields: { responseType: 'blob'},
  converters: {'* image': true}, 
  data: {
    data: 'ABC-abc-1239',
    code: 'Code128',
  },
  success: function(response) {
    $('#barcode').html('<img src="' + URL.createObjectURL(response) + '"/>');
  },
  error: function(xhr) {
    console.log('Ошибка запроса')
  }
});


* С удивлением узнал что jquery до сих пор не может работать с responseType из коробки. Что только подтверждает что пора о нём забыть.

Если не заработает(зависит от версии jq) - выкинь его нафиг, и исползуй нативный fetch:
fetch('/handlers/barcode.php?data=ABC-abc-1239&code=Code128')
  .then(res => res.blob())
  .then(URL.createObjectURL)
  .then(src => {
    $('#barcode > img').attr('src', src)
  })
  .catch(err => {
    console.log('Ошибка запроса')
  });
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы