在 Django 中通过 AJAX 调用 python 函数

Question

I am sending a request via AJAX upon a button (whose id="transcript" ) click to trigger a function called transcript .

AJAX

document.querySelector('#transcript').addEventListener('click', () => {
                        fetch(`transcript/${CNIC}`);
                        

views.py

def transcript (request, cnic):
    form = TranscriptForm()
    return render (request, "certificates/transcripts.html", {
        "form": form,
        "cnic": cnic
    })

The fetch request works fine, but the new page ie transcripts.html does not render. I have to manually type the URL to update the view. Why is it happening, can anybody please explain?

The output in console:

views.js:62 Fetch finished loading: GET "http://127.0.0.1:8000/transcript/1530660001979".

Answer 1

You can't redirect a user this way, but you can do something like redirecting a user in js after a successful response from the backend:

template.html:

<!-- set the csrf token as a variable, then include script.js -->
<script> var csrf_token = "{{ csrf_token }}" </script>
<script src="{% static 'script.js' %}"></script>

script.js:

// execute on button click:
$('#button').click(function() {

  // send the ajax request:
  $.ajax({
    url : 'the_url',
    csrfmiddlewaretoken : csrf_token, // from the template
    type : 'POST',
    data : {
      'frontend_key' : 'frontend_value'
       ...
    }
    success : success_function // reference to function below:
  })
});

// executes on receiving a response from the backend:
function success_function(response) {

  // unpack response:
  backend_value = request.backend_key;
  ...

  // redirect user:
  window.location('the_new_url');

}

views.py:

def transcript(request):

    # unpack request:
    frontend_value = request.POST['frontend_key']
    ...

    # do something:
    ....

    # pack response:
    response = json.dumps({
        'backend_key' : 'backend_value',
    })

    return HttpResponse(response)

Answer 2

An example

views.py

def returnSubCategories(request):
  category_request = request.GET.get('category',None)
  print(request.GET.get('category',None))
  subcategories =   SubCategories.objects.filter(category=category_request).values()
  subcategories_list = list(subcategories)

  return JsonResponse(subcategories_list,safe=False)

urls.py

url(r'^ajax/obtenersubcate/$',views.returnSubCategories,name='regresasubcategorias'),

code js

$("#button").on('click',function(e){
    e.preventDefault();
    getList();
});

function getList() {
    axios({
        method:'get',
        url:'{% url "anuncios:regresasubcategorias" %}',
        params:{'category':1},
        responseType:'json'

    })
    .then(function(response){
        console.log(response);
    })
    .catch(function(error){
        console.log(error)
    })
  }