如何在使用Ajax上传图像时捕获服务器json响应？

我有的通过jQuery从外部模板文件加载的方式：如何在使用Ajax上传图像时捕获服务器json响应？

$('#imguploadform').html('&nbsp;').load('{% url upload_form %}');

在模板中，它看起来是这样的：

<img src="{{ MEDIA_URL }}img/misc/upload.png" alt="Illustration" title="myimage" /> 
<form id="uploadForm" enctype="multipart/form-data" method="post" action="upload_picture/"> 
    {{ form.as_ul }} 
    <input type="submit" value="Upload" id="uploadImage" /> 
</form>

我试图上传与使用jQuery AJAX的图像表格插件：

var submit_options = { 
    target: '#picworks', 
     dataType: 'json', 
     success: function() { 
     alert('It Works!'); 
    }  
    }; 

    $('#uploadForm').submit(function(){ 
     $(this).ajaxSubmit(submit_options); 
     return false; 
    });

但是，然后我想从服务器返回一个json对象，并使用它的返回地址动态加载到页面的图像。我已经试过这样：

def upload_picture(request): 
    dest = save_original(request.FILES['image']) 
    form = UploadImageForm(request.POST, request.FILES) 

    res = json.dumps({ 
     "path": dest, 
    }) 

    return HttpResponse(res, mimetype='application/json')

的问题是，我不能赶在JavaScript中的JSON响应，所以我的浏览器显示我只是一个空白页面使用JSON词典内容。我做错了什么？

来源

2010-02-02 Enchantner

你的成功回调取一个参数。这将是答复。

来源

2010-02-02 22:17:16 inklesspen

var submit_options = { 
    target: '#picworks', 
    dataType: 'json', 
    success: function(response) { 
     alert('It Works!'); 
     window.location.href = response.path; 
    }  
};

来源

2010-02-03 09:36:52 lawrence

我解决了这个问题！这个函数用来替换表单提交动作和ajax请求的函数比从外部文件加载表单要早。所以它应该是这样的：

$('#imguploadform').html('&nbsp;').load('{% url upload_form %}', 

    function(){ 
    var submit_options = { 
     dataType: 'json', 
     success: update_dom 
    }; 

    function update_dom(data) { 
     $('#picworks').html('<img src="' + data.path + '" alt="Illustration" />'); 
    } 

    $('#uploadForm').submit(function(){ 
     $(this).ajaxSubmit(submit_options); 
     return false; 
    }); 

});

来源

2010-02-03 16:03:32 Enchantner

如何在使用Ajax上传图像时捕获服务器json响应？

回答

相关问题