Ajax調用Django函數

我試圖刪除通過複選框通過Ajax選擇的圖像列表，這些列表已通過Django Ajax上傳器上傳。我已經成功獲得了圖像列表，但我不確定如何通過Ajax將Django函數傳遞給它。任何人都可以請告知：Ajax調用Django函數

如何將選定圖像的列表傳遞給Django函數刪除圖像？
我應該如何處理ajax部分的CSRF？

HTML

<!DOCTYPE html>{% load static from staticfiles %} {% load i18n %} 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    <title>Demo</title> 
 
    <script src="{% static 'js/jquery.min.js' %}"></script> 
 
    <!-- Latest compiled and minified JavaScript --> 
 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
    <!-- Latest compiled and minified CSS --> 
 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <!-- Optional theme --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"> 
 
    <style> 
 
    input.chk { 
 
     margin-left: 70px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div id="content" class="clearfix container"> 
 
     {% load i18n crispy_forms_tags %} 
 
     <form method="post" action="." enctype="multipart/form-data"> 
 
     {% csrf_token %} {% crispy form %} {% crispy formset formset.form.helper %} 
 
     <div class="image-upload-widget"> 
 
      <div class="preview"> 
 
      </div> 
 
      <div class="file-uploader"> 
 
      <noscript> 
 
       <p>{% trans "Please enable JavaScript to use file uploader." %}</p> 
 
      </noscript> 
 
      </div> 
 
      <p class="help_text" class="help-block"> 
 
      {% trans "Available file formats are JPG, GIF and PNG." %} 
 
      </p> 
 
      <div class="messages"></div> 
 
     </div> 
 
     <input type="submit" name="save" class="btn btn-primary pull-right" value="Submit"> 
 
     <input type="button" id="delete" class="btn btn-primary pull-left" value="Delete Selected Files"> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <script src="{% static 'js/fileuploader.js' %}"></script> 
 
    <link href="{% static 'css/fileuploader.css' %}" media="screen" rel="stylesheet" type="text/css" /> 
 
    <script> 
 
    $(function() { 
 
     var uploader = new qq.FileUploader({ 
 
     action: "{% url 'planner:ajax_uploader' %}", 
 
     element: $('.file-uploader')[0], 
 
     multiple: true, 
 

 
     onComplete: function(id, fileName, responseJSON) { 
 
      if (responseJSON.success) { 
 
      url = '<label for="' + fileName + '"><img src="' + {{MEDIA_URL}} + responseJSON.url + '" alt="" /></label>'; 
 
      checkbox = '<p><input type="checkbox" class="chk" id="' + fileName + '" name="' + fileName + '" value="0" /></p>'; 
 
      $('.preview').append(url); 
 
      $('.preview').append(checkbox); 
 
      } else { 
 
      alert("upload failed!"); 
 
      } 
 
     }, 
 
     onAllComplete: function(uploads) { 
 
      // uploads is an array of maps 
 
      // the maps look like this: {file: FileObject, response: JSONServerResponse} 
 
      alert("All complete!"); 
 

 
      alert(checkbox); 
 
     }, 
 
     params: { 
 
      'csrf_token': '{{ csrf_token }}', 
 
      'csrf_name': 'csrfmiddlewaretoken', 
 
      'csrf_xname': 'X-CSRFToken', 
 
     }, 
 
     }); 
 
    }); 
 
    </script> 
 
    <script> 
 
    $("#delete").on('click', function() { 
 
     var allVals = []; 
 

 
     $(":checkbox").each(function() { 
 
     var ischecked = $(this).is(":checked"); 
 
     if (ischecked) { 
 
      allVals.push(this.id); 
 
     } 
 
     }); 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

來源

2015-01-08 zan

看看這裏https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/，你有一個完整的例子如何在ajax調用中使用csrf。 –

一旦你得到的圖像刪除列表中，你傳遞給Ajax調用將由Django視圖來處理，如所以：

function submitData(data) { 
    var csrftoken = getCookie('csrftoken'); // from https://docs.djangoproject.com/en/1.7/ref/contrib/csrf/#ajax 
    $.ajax({ 
     type: 'POST', 
     beforeSend: function(xhr, settings) { 
      if (!csrfSafeMethod(settings.type) && !this.crossDomain) { 
       xhr.setRequestHeader("X-CSRFToken", csrftoken); 
      } 
     }, 
     data: JSON.stringify(data), 
     url: {% url 'image_handler' %} 
    }).done(function(data) { 
     console.log(data.deleted + ' images were deleted'); 
    }).error(function(data) { 
     console.log('errors happened: ' + data); 
    }); 
}

然後，在你views.py：

def image_handler(request): 
    if request.method != 'POST': 
     return HttpResponseNotAllowed(['POST']) 

    str_body = request.body.decode('utf-8') 
    changes = json.loads(str_body) 
    for change in changes: 
     pass # `change` contains the id of the image to delete 
    data = {'status': 200, 
      'deleted': len(changes)} 
    return JsonResponse(data)

它工作得很好:)

來源

2015-01-08 09:04:46 mccc

Thcs mccc for code :) ..猜猜我已經在ajax讀取更多:(任何好的教程爲Ajax在那裏？ – zan

這取決於您的需求;我通常轉向[jQuery的文檔]（http：// api。 jquery.com/jquery.ajax/）。 – mccc

Ajax調用Django函數

回答

相關問題