如何使用Django中的图像更新div？ [英] How to update a div with an image in Django?

问题描述

以下是一个matplotlib代码，作为响应生成一个散点图。

  def plot（request）：
r = mlab.csv2rec（'data.csv'）
 fig =图（figsize =（6,6））
 canvas = FigureCanvas（fig）
 ax = fig.add_subplot 111）
 ax.grid（True，linestyle =' - '，color ='gray'）
 ax.scatter（rx，ry）; 
 response = django.http.HttpResponse（content_type ='image / png'）
 canvas.print_png（响应）
返回响应
  

我想使用jquery ajax更新模板中的div标签。以下是监听表单sumbit按钮并更新成功的div的jquery代码。

 < script type =text / javascriptcharset =utf-8> 
 $（function（）{
 $（'＃plot'）。submit（function（）{
 jQuery.ajax（{
 url：this.action，
超时：2000，
 aysnc：true，
错误：function（）{
 console.log（无法提交）; 
}，
成功：函数（r）{
 $（'＃plotarea'）。html（r）; 
} 
}）
 return false; 
}）
 }）
< / script> 
  

但是当我点击提交按钮时，垃圾字符显示在div而不是图像上。 / p>

任何身体都可以指导我如何从响应中显示图像？

提前感谢

解决方案

因为 plot（）输出原始图像数据标题），并将其直接分配给div的contentarea（ .html（））。当url直接返回图像数据时，它应该被用作< img> 标签的 src 属性。

如果您不想重新设计工作流程，可以尝试使用base64编码字符串并使用以下方法： http://www.websiteoptimization.com/speed/tweak/inline-images/

ie在你的成功通话中，像 $（'＃image'）。attr（'src'，'data：image / png; base64，'+ r）; p>

The following is a matplotlib code that generates a scatter plot in as the response.

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

I would like to update a div tag in the template using jquery ajax. Following is the jquery code that listens to a form sumbit button and updates a div on success.

<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>

But when I click the submit button, junk characters are displayed on the div instead of the image.

Could any body guide me on how I could display the image from the response ?

Thanks in advance.

解决方案

It's failing because plot() outputs the raw image data (with headers) and you assign it directly to the contentarea (.html()) of the div. When the url returns the image data directly it should be used as the src attribute of an <img> tag instead.

If you don't wish to redesign your workflow you could try base64 encoding the string and use this method: http://www.websiteoptimization.com/speed/tweak/inline-images/

i.e. something like $('#image').attr('src', 'data:image/png;base64,' + r); in your success call.

这篇关于如何使用Django中的图像更新div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！