如何用Django中的图像更新div?

时间:2010-02-06 08:07:41

标签: javascript jquery image django-templates django-views

以下是一个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

我想使用jquery ajax更新模板中的div标签。以下是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>

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

有没有人可以指导我如何从响应中显示图像?

提前致谢。

1 个答案:

答案 0 :(得分:0)

失败,因为plot()输出原始图像数据(带标题),并将其直接分配给div的contentarea(.html())。当网址直接返回图片数据时,它应该用作src标记的<img>属性。

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

即。在你成功的电话中就像$('#image').attr('src', 'data:image/png;base64,' + r);一样。