Django+Ajax |文件上传|服务器不支持'无法识别Ajax请求

Django + Ajax | File Upload | Server doesn't recognise Ajax Request

本文关键字：Ajax 请求 识别 文件 服务器 不支持 Django+Ajax      更新时间：2023-09-26

我正在尝试使用ajax with Django实现文件上传，但遇到了一些问题。

当用户在选择文件并提交表单后尝试上传文件时，根据我的理解，应该使用POST方法向服务器发送ajax请求，但在我的情况下，正在向服务器发送POST请求，但服务器无法将其识别为ajax请求，浏览器被重定向到http://<server>:<port>/upload/，该页面上的内容如下。

{"status": "error", "result": "Something went wrong.Try Again !!"}

Django版本：1.6.2

Python版本：2.7.5

此外，还在Django Development Server上进行测试。

视图.py

def upload(request):
        logging.info('Inside upload view')
        response_data = {}
        if request.is_ajax():
                logging.info('Is_AJAX() returned True')
                form = UploaderForm(request.POST, request.FILES)
                if form.is_valid():
                        logging.info('Uploaded Data Validated')
                        upload = Upload( upload=request.FILES['upload'] )
                        upload.name = request.FILES['upload'].name
                        upload.save()
                        logging.info('Uploaded Data Saved in Database and link is %s' % upload.upload)
                        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'] = "Something went wrong.Try Again !!"
        return HttpResponse(json.dumps(response_data), content_type='application/json')

模板

<form id="uploadForm" action="/upload/" method="post" enctype="multipart/form-data">
                {% csrf_token %}
<input id="fileInput" class="input-file" name="upload" type="file">
<input type="submit" value="Post Images/Files" />
</form>

Javascript 1:

$('#uploadForm').submit(function(){
        var formData = new FormData($(this)[0]);
        $.ajax({
                url: '/upload/',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                alert(data)
                },
                cache: false,
                contentType: false,
                processData: false
        });
        return false;
});

Javascript 2

var options = {
      url: '/upload/',
      type: "POST",
       error: function(response) {
               alert('Something went Wrong. Try Again');
        },
        success: function(response) {
            if ( response.status == 'success' ) {
              alert('success');
             }
        }
};
$('#uploadForm').ajaxSubmit(options);

问题：

1） 为什么Django不能识别ajax请求，request.is_ajax()的值总是False。

2） 即使服务器无法识别ajax请求，为什么我的浏览器会被重定向到另一个页面？

这里还有另一个类似的问题，但没有结果。

这对我有用。你需要一个jquery.form.js

$("#uploadForm").submit(function(event) {
    $(this).ajaxSubmit({
        url:'{% url upload_file %}',
        type: 'post',
        success: function(data) {
            console.log(data)
        },
        error: function(jqXHR, exception) {
            console.log("An error occurred while uploading your file!");
        }
    });
    return false;
});

这里有一个类似的问题和答案。

确保javascript代码块

$('#uploadForm').submit(function(){
    var formData = new FormData($(this)[0]);
    $.ajax({
            url: '/upload/',
            type: 'POST',
            data: formData,
            async: false,
            success: function (data) {
            alert(data)
            },
            cache: false,
            contentType: false,
            processData: false
    });
    return false;
});

在页面DOM中的uploadFormhtml表单之后加载。在您的案例中，您似乎试图将提交处理程序与尚未加载的表单元素绑定，因此当您单击时，它会发送简单的POST请求。

1）为什么is_ajax（）不工作您是否包含JQuery表单插件（jquery.form.js）？ajaxSubmit()需要那个插件。

看看http://jquery.malsup.com/form/

如果已经完成，您可以查看HTTPRequest对象

Django文档称HttpRequest.is_ajax()如果请求是通过XMLHttpRequest发出的，则返回True。如果您正在使用一些javascript库来发出ajax请求，则不必为这件事而烦恼。您仍然可以验证"HTTP_X_REQUESTED_WITH"头，看看Django是否收到了XMLHttpRequest。

2） 为什么要重定向页面？

如上所述，JQuery表单插件是处理ajax请求及其回调所必需的。此外，对于ajaxSubmit（），您需要覆盖$（#uploadForm）.submit（）

 $('#uploadForm').submit( function (){
     $(this).ajaxSubmit(options);
 return false;
 });

希望这有帮助：）

相关文章：