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

【问题标题】：How can I catch server json response while uploading image using Ajax?使用 Ajax 上传图像时如何捕获服务器 json 响应？
【发布时间】：2011-01-12 07:59:44
【问题描述】：

我有一个通过 jQuery 从外部模板文件加载的表单：

$('#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 字典内容的空页面。我做错了什么？

【问题讨论】：

标签： python django image upload

【解决方案1】：

让你的成功回调接受一个参数。这将是响应。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

我解决了这个问题！问题是用 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;
    });

});

【讨论】：