Как обновить div с изображением в Django?

Question

Ниже приведен код matplotlib, который генерирует график рассеяния в качестве ответа.

def plot(request):
    r = mlab.csv2rec('data.csv')
    fig = Figure(figsize=(6,6))          
    canvas = FigureCanvas(fig)
    ax = fig.add_subplot(111)
    ax.grid(True,linestyle='-',color='gray')
    ax.scatter(r.x,r.y);       
    response=django.http.HttpResponse(content_type='image/png')
    canvas.print_png(response)
    return response

Я бы хотел обновить тег div в шаблоне, используя jquery ajax. Ниже приведен код jquery, который прослушивает кнопку sumbit формы и обновляет div в случае успеха.

<script type="text/javascript" charset="utf-8">
    $(function() { 
        $('#plot').submit(function() {
          jQuery.ajax({            
            url: this.action,
            timeout: 2000,
            aysnc: true,
            error: function() {
              console.log("Failed to submit");
            },
            success: function(r) { 
              $('#plotarea').html(r);
              }
          }) 
            return false;
          })
     })
</script>

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

Может ли какой-либо орган помочь мне с отображением изображения из ответа?

Заранее спасибо.

Answer 1

Сбой, потому что plot() выводит необработанные данные изображения (с заголовками), и вы присваиваете их непосредственно contentarea (.html()) div. Когда URL возвращает данные изображения напрямую, он должен использоваться вместо атрибута src тега <img>.

Если вы не хотите перепроектировать свой рабочий процесс, вы можете попробовать base64-кодирование строки и использовать этот метод: http://www.websiteoptimization.com/speed/tweak/inline-images/

т.е. что-то вроде $('#image').attr('src', 'data:image/png;base64,' + r); в вашем вызове успеха.