title: Django Ajax POST request fail to redirect
body: <p>I am trying to create a website to capture picture from client's camera and save it in the database. However after everything was saved, I cant seem to redirect the page.</p>
  <p>views.py</p>
  <pre><code>def facial_capture(request):
      if request.method == 'POST':
          file = request.FILES['snap']
          if file:
              student = Student.objects.get(id=request.session['id'])
              if student:
                  FaceImage.objects.create(student=student, image=file)
                  return HttpResponse(&quot;{'status': 1}&quot;, content_type='application/json')
          return HttpResponse(&quot;{'status': 0}&quot;, content_type='application/json')
      return render(request, 'id_capture/facial_capture.html')
  </code></pre>
  <p>face_capture.html</p>
  <pre><code>{% block body %}
      &lt;div class=&quot;container&quot;&gt;
          &lt;form&gt;{% csrf_token %}
              &lt;video id=&quot;video&quot; width=&quot;640&quot; height=&quot;480&quot; autoplay&gt;&lt;/video&gt;
              &lt;button id=&quot;send&quot;&gt;Submit&lt;/button&gt;
              &lt;canvas id=&quot;image_canvas&quot; width=&quot;640&quot; height=&quot;480&quot;&gt;&lt;/canvas&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  {% endblock %}
  </code></pre>
  <p>face_capture.js</p>
  <pre><code>$(document).ready(function () {
      var video = document.getElementById('video');
      var canvas = document.getElementById('image_canvas');
      var context = canvas.getContext('2d');
      var w = 640, h = 480;
  
      if(navigator.mediaDevices &amp;&amp; navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia({ video: true }).then(stream =&gt; {
              video.srcObject = stream;
              video.play();
          });
      }
  
      document.getElementById(&quot;send&quot;).addEventListener(&quot;click&quot;, function() {
          context.translate(w, 0);
          context.scale(-1, 1);
          context.drawImage(video, 0, 0, w, h);
          canvas.toBlob(upload, &quot;image/jpeg&quot;);
      });
  
      function upload(file) {
          var formData =  new FormData();
          formData.append(&quot;snap&quot;, file);
          const csrftoken = document.querySelector('[name=csrfmiddlewaretoken]').value;
  
          $.ajax({
              headers: {'X-CSRFToken': csrftoken},
              type: 'POST',
              url: '/signup/facial_capture',
              data: formData,
              cache: false,
              processData: false,
              contentType: false,
              enctype: 'multipart/form-data',
              success: function(data){
                  console.log('response received');
                  if (data.status == 1) {
                      console.log('status ok');
                      window.location.href = &quot;login&quot;;
                  } else {
                      console.log('status failed');
                      window.location.reload();
                  }
              }
          })
      }
  });
  </code></pre>
  <p>I assume that after the return HttpResponse it will get to the function in ajax success and redirect to login page but somehow I am still at the facial_capture page with csrfmiddlewaretoken attached.</p>
  <p>My question is that is this the right way to redirect the page after successfully send post request with ajax or am I doing anything wrong?</p>
  <p><strong>Edit:</strong>
  url.py</p>
  <pre><code>urlpatterns = [
      path('login', views.login, name='login'),
      path('signup/facial_capture', views.facial_capture, name='facial_capture')
  ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>