Как я могу поймать ответ сервера json при загрузке изображения с помощью Ajax?

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>

Я пытаюсь загрузить изображение с помощью ajax, используя плагин jquery form:

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')

Проблема в том, что я не могу поймать ответ json в javascript, поэтому мой браузер показывает мне просто пустую страницу с содержимым словаря json. Что я делаю не так?

Answer 1

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

Answer 2

Я решил проблему! Дело в том, что функция, которая заменяет действие отправки формы запросом 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;
    });

});

Answer 3

Ваш обратный вызов успеха принимает параметр. Это будет ответ.