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請求時就是如此。