ajaxForm appears to alter returned data

ajaxForm appears to alter returned data

I have a form which submits via ajaxForm so i can do a fancy image uploader:

  1. $('#uploadForm').ajaxForm({
                    beforeSubmit: function() {
                        $('#uploadForm').find('.image-display').children('img').attr('src', '/theme/all/img/ui/loading-clock-transparent.gif');
                    },
                   
                    dataType: 'text',
                   
                    success: function(data, textStatus, XMLHttpRequest) {
                        $('#uploadForm').find('.image-display').children('img').attr('src', '');
                        console.log(data);
                        console.log(textStatus);
                    }
                });











I'm simply returning a simple json encoded object - {"image":"return.jpg"} - but for some reason, when I output the returned data to the console, it has some extra HTML wrapped around it:
  1. <head></head><body>{"image":"return.jpg"}</body>
If I set the dataType to 'json' it fails completely...

However, when I perform a similar request to what the form submission should be through $.post() i get a different behaviour:

  1. $.post('/nominations/edit-profile',
                    { 'nominee-profile-image-upload' : 'nominee-profile-image-upload' },
                    function(data, textStatus, XMLHttpRequest) { console.log(data); },
                    'text'
                );



And the expected output - {"image":"return.jpg"} - appears without the html tags


What's going on?