Django Jquery不需要AJAX请求

Question

在阅读了有关类似主题的其他问题之后，我仍然不明白这段代码有什么问题。

我正在测试使用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是错误。

我错过了什么？

谢谢，里卡多

Answer 1

您可以尝试使用从API section的例子，而不是，只是看看源代码：

$('#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> 

Answer 2

如何假定如果您的脚本中没有表单数据发送，则可以开展工作。

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(''); 
    } 
}; 

Answer 3

您至少有一个问题，您可以查看 - 这样的：

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

将防止进一步执行时request.GET是空做一个POST请求时就是如此。