Форма Django Jquery без запроса AJAX

Прочитав другие вопросы на аналогичную тему, я так и не понял, что не так с этим кодом.

Я тестирую код, который использует плагин Jquery Form. Я добавил вызов в представлении к шаблону, чтобы отобразить его в первый раз, чтобы пользователь мог выбрать файл и загрузить. Но он никогда не отправляет запрос AJAX, поэтому рассматриваемая часть кода не выполняется. Хотя это и не показано здесь, библиотека jQuery и подключаемый модуль jQueryForm действительно вызываются.

Template:
<form id="uploadForm"  method="post" enctype="multipart/form-data">
                            {% csrf_token %}
        <input id="fileInput" class="input-file" name="upload" type="file">
        {{ form.docfile }}
        <span class="upload-message"></span>
        <input type="submit" value="Upload" />
</form>
<script>
    var message = '';
    var options = {
        type: "POST",
        url: '/upload/file/',
        error: function(response) {
            message = '<span class="error">We\'re sorry, but something went wrong. Retry.</span>';
            $('.upload-message').html(message);
            $('fileInput').val('');
        },
        success: function(response) {
            message = '<span class="' + response.status + '">' + response.result + '</span> ';
            message = ( response.status == 'success' ) ? message + response.fileLink : message;
            $('.upload-message').html(message);
            $('fileInput').val('');
        }
    };
    $('#uploadForm').ajaxSubmit(options);
</script>

Вид:

def upload(request):
    response_data = {}

    if request.method == 'POST':
        if request.is_ajax:
            form = UploaderForm(request.POST, request.FILES)

            if form.is_valid():
                upload = Upload(
                upload=request.FILES['upload']
            )
            upload.name = request.FILES['upload'].name
            upload.save()

            response_data['status'] = "success"
            response_data['result'] = "Your file has been uploaded:"
            response_data['fileLink'] = "/%s" % upload.upload

            return HttpResponse(json.dumps(response_data), content_type="application/json")

        response_data['status'] = "error"
        response_data['result'] = "We're sorry, but kk something went wrong. Please be sure that your file respects the upload conditions."

        return HttpResponse(json.dumps(response_data), content_type='application/json')
    else:
        form = UploaderForm()
        return render(request, 'upload.html', {'form': form})

Он правильно вызывает шаблон в первый раз, отображает кнопки, снова выполняет скрипт, но форма недействительна, поэтому response_data с ошибкой.

Что мне не хватает?

Спасибо, Рикардо.


django ajax jquery-forms-plugin
person Rmartin    schedule 23.12.2013    source источник
comment
Итак, после нажатия кнопки «Отправить» ajax вообще не запускается?   -  person mariodev    schedule 23.12.2013
comment
Как это должно работать, если в вашем скрипте нет отправки данных??   -  person catherine    schedule 23.12.2013
comment
Привет, Рикардо, тебе удалось решить эту проблему? Я столкнулся с той же проблемой. Нужна помощь!   -  person g4ur4v    schedule 09.04.2014

Ответы (3)


arrow_upward
0
arrow_downward

Вместо этого вы можете попробовать использовать пример из раздела API, просто взгляните на исходный код:

$('#uploadForm').ajaxForm({
    beforeSubmit: function(a,f,o) {
        $('.upload-message').html('Submitting...');
    },
    success: function(data) {
        $('.upload-message').html('Done!');
    }
});

и HTML:

<form id="uploadForm" action="/upload/file/" method="post" enctype="multipart/form-data">
                        {% csrf_token %}
    <input type="hidden" name="MAX_FILE_SIZE" value="100000">
    File: <input type="file" name="file">
    {{ form.docfile }}
    <span class="upload-message"></span>
    <input type="submit" value="Upload" />
</form>
person mariodev    schedule 23.12.2013
comment
Я думаю, я должен использовать массив для значения файла, верно? Как я мог это сделать? Также для формы я должен просто передать $('#uploadForm')? - person Rmartin; 23.12.2013

arrow_upward
0
arrow_downward

Как это должно работать, если в вашем скрипте нет отправки данных формы.

var options = {
    type: "POST",
    url: '/upload/file/',
    data: new FormData(document.getElementById('uploadForm')),
    processData: false,
    contentType: false,
    error: function(response) {
        message = '<span class="error">We\'re sorry, but something went wrong. Retry.</span>';
        $('.upload-message').html(message);
        $('fileInput').val('');
    },
    success: function(response) {
        message = '<span class="' + response.status + '">' + response.result + '</span> ';
        message = ( response.status == 'success' ) ? message + response.fileLink : message;
        $('.upload-message').html(message);
        $('fileInput').val('');
    }
};
person catherine    schedule 23.12.2013
comment
Спасибо Кэтрин. Я думал, что строка $('#uploadForm').ajaxSubmit(options); сделал бы это. Тем не менее, добавив 3 строки (с данными, processData и contentType), представление не распознает запрос как AJAX и выдает ошибку. - person Rmartin; 23.12.2013

arrow_upward
0
arrow_downward

У вас есть как минимум одна проблема с просмотром - это:

if not request.GET:
    return render(request, 'upload.html')

предотвратит дальнейшее выполнение, когда request.GET будет пустым, что имеет место при выполнении запроса POST.

person bruno desthuilliers    schedule 23.12.2013
comment
Спасибо Бруно. Я помещаю этот оператор if, поскольку представление оценивает запрос как не AJAX, переходит к сообщению об ошибке и возвращает. - person Rmartin; 23.12.2013
comment
Я смущен, что HTML-файл будет вызываться, если исходный код представления нигде его не вызывает. Я просто тестирую его, чтобы позже настроить его под свои нужды. - person Rmartin; 23.12.2013