Error en imagen generada con ajax jquery?

[Mixvice]

Hola, soy relativamente nuevo en esto de jquery y ajax, y la verdad me gusta mucho hace las cosas mas sencillas pero tengo un problema, verán estoy creando un generador de imagen para mi sitio usando php y ajax, al mostrar la imagen sin ajax sale bien y todo pero cuando lo hago con ajax me sale un código todo raro como si decodificara la imagen o algo asi:

Código:

GIF89aWd�3P|��˘����e˘e�e22e2�ʗ���fx����!!!�˘ee2�‘vvvˡy������������Xfu��ڍ�����%J%:v:D�D2e2AAAXXX555/ ? ^^^ȑb???�tNxW;LLL;;;///FFF!�
,Wd�@�pH,�A��l ��I�Z�H� �n��jv&v��5�f'��z�����r���EP��yC{
��p�Qml���no�������Qwv��tHo�����������s�������l��������Ż�]^��f����ʿ��O��ѹ��ץ������m�����
 �
���v�������8r!@�`�Z ,`sؿ 4��60`P���v���#C2�h�dʛ-]2 ���D!'�kЦ��,s�<ԡ)��#���2�K5uq
ԘA�Ze3� 
:p����װ#'ZUV�,�h�p;�X�r���i�n^`8�hȪ)�:-�m� ��8X��g��I�N�|d撊9�����Ѥ� .�k�ώ��y�k����j3u7o�uc���h��Ə�ի\v��؉�빵�t�՗�m!;�{>�"���7� F O�熼���$�r��5 v~0y���W�2H� ��~��^�MLA�x�{��w�r���m�a�+H�:n�Ӊ |�b%z�}��^O@VRc�����q�������$O
�b��]�݋�X$LN��D"i�X���z
��&�N�`aVr'c����]�i���>���LzW&)<��ot2q���@�
��&!�鳓6�fb��h_�="" 9;�eo�l5�x7���l��m�9��="">W�m��l��Զ��F2v�R7{#�g�r�.�m��P�% *��2�l����#�o��'�^��3�$8}c L��w�9�q���%�@ ��)u�S��ҭ�[o�wz�6�ߎ{�]6ݻ�(�����@�zxf9���/���/}�Wo��#���w�;�˳���9�n��ׯ��:��~ �[^�"g?�MA�C���W1���K� &8�t��G���F��Y�
� B���)���kֲ@a��aG�%l�+�:ļ����}2��Kx�q��%܉C�p��C!Ű��PA1t�h)*h ��^8���i�7���ԁ�NA,(c�߇F��q������� ���8�/� d.l�"����Q�$�Zx��i��dA
)�H2Q?�r�:Z��L�1��T��d�WMgm��)��>j� [�D)b7�hr��
0eɆE��P�4�/5y�K.R���e-��J(�T�dfy%���Q��ܤ@���_�S�#3o��t��<�I�z���̧>���~�� �G�;

el código que uso para el ajax es este:

Código PHP:

          // esperamos que el DOM cargue
        $(document).ready(function() { 
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta, //funcion que se ejecuta una vez enviado el formulario
                               
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#myForm').ajaxForm(opciones) ; 
            
             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                      $("#loader_gif").fadeIn("slow");
             };
             function mostrarRespuesta (responseText){
                          $("#loader_gif").fadeOut("slow");
                          $("#ajax_loader").append("<br> "+responseText);
             };
   
        }); 
   

Tambien intente con este otro código:

Código PHP:

  $(document).ready(function() {
   // Esta primera parte crea un loader no es necesaria
    $().ajaxStart(function() {
        $('#loader_gif').show();
        $('#ajax_loader').hide();
    }).ajaxStop(function() {
        $('#loader_gif').hide();
        $('#ajax_loader').fadeIn('slow');
    });
   // Interceptamos el evento submit
    $('#myForm').submit(function() {
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#ajax_loader').html(data);
            }
        })        
        return false;
    });
}) 
   

Pero ninguno de los 2 funciona :S Me saca los caracteres raros que estan arriba xD

[zerokilled]

buenas,
lo que estas viendo es el contenido binario de la imagen. esto es porque php le esta devolviendo la imagen en si. fíjate que no es lo mismo devolver el contenido de algo que devolver la url de donde se encuentra un recurso.

una forma sería que en lugar de enviar la petición por ajax, asignaras la url con sus parámetros a un elemento <img>. dicho elemento se encargará de interpretar el contenido binario. sin embargo, en el segundo código veo que la petición se realiza por método POST. por lo que no te servirá la asignación de la url a un elemento <img>, a menos que adaptes el script php a método GET.

la otra alternativa es que en lugar de php devolver el contenido binario, convierta ese binario a base64 en formato data uri.

[Mixvice]

Claro!!!! pero que ignorate soy, olvide por completo eso muchas gracias por tu ayuda lo que hice fue crear un archivo mas con el codigo html para que ese sea el que se muestre en vez del enlace directo a la imagen :) muchas gracias por hacerme caer en ese error