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

Question

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

$('#imguploadform').html(' ').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 字典的内容。我哪里做错了？

Answer 1

让你的成功回调函数接收一个参数。这个参数就是你得到的响应结果。

Answer 2

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

当然可以！请把你想要翻译的内容发给我，我会帮你用简单易懂的语言解释清楚。

Answer 3

我解决这个问题了！问题在于，用来把表单提交动作替换成ajax请求的那个函数，调用的时间比表单从外部文件加载的时间要早。所以应该这样做：

$('#imguploadform').html(' ').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;
    });

});