如何在使用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; 
    }); 

});