AJAX call with Django is printing the response to a blank page

Question

What's happening now is when I click submit ("Go!"), Django clears the entire page and then prints the correct JSON response results_matrix on a blank page. alert("success") does not appear or alert("error"). I don't know why the post function is doing this since I'm not returning a render of anything.

Before clicking "Go!":

After clicking "Go!" in Chrome:

After clicking "Go!" in Internet Explorer:

The ajax call is returning a raw json file to download (which Chrome displays automatically in the browser) instead of going into the ajax success function.

Expected Behavior: Page remains the same while a pop-up appears saying, "success".

In index.js:

$(document).ready(function() {
        
  var csrftoken = Cookies.get("csrftoken");

  function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
  }

  $.ajaxSetup({
      beforeSend: function (xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
              xhr.setRequestHeader("X-CSRFToken", csrftoken);
          }
      }
  });  

  $(document).on("submit","#weather_form",function(event){
    // //Prevent default django post behaviour for a form submission.
    event.preventDefault();

    $.ajax({
      url: "/weather/",
      type: "POST",
      data: {type_of_person: $("#id_type_of_person").val(),
        exercise: $("#id_exercise").val(),
        unit: $("#id_unit").val(),
        zip_postal: $("#id_zip_postal").val()},
      dataType: "json",
      contentType: "application/json",
      success: function (data){
        alert("success");
      },
      error: function(xhr,errmsg,err) {
        alert("error");
        console.log(errmsg + "\n" + xhr.status + ": " + xhr.responseText)
      }
    });

    return false;
  });
});

In index.html:

           <form action="/weather/" method="post" autocomplete="off" id="weather_form">
                {% csrf_token %}
                {{ form.non_field_errors }}
                {{ error }}
                <ul>
                    <li class="center_text">
                        <h3>Best Time to Go Out</h3>
                    </li>
                    <li>
                        <label>{{ form.type_of_person.label }}: </label>
                        {{ form.type_of_person }}
                        {{ form.type_of_person.errors }}
                    </li>
                    <li>
                        <label>{{ form.exercise.label }}: </label>
                        {{ form.exercise }}
                        {{ form.exercise.errors }}
                    </li>
                    <li>
                        <label>{{ form.unit.label }}: </label>
                        {{ form.unit }}
                        {{ form.unit.errors }}
                    </li>
                    <li>
                        <label>{{ form.zip_postal.label }}: </label>
                        {{ form.zip_postal }}
                        {{ form.zip_postal.errors }}
                    </li>
                    <li>
                        <input id="go" type="submit" value="Go!">
                    </li>
                </ul>
            </form>

In views.py:

class weather(base.TemplateView):
    ...

    @staticmethod
    def post(request, *args, **kwargs):
        ...
        if form.is_valid():
            ...
            return http.JsonResponse({"results_matrix": results_matrix.tolist()}, status=200)
        else:
            return http.JsonResponse({"error": form.errors}, status=400)

Edit #1:

The request made after clicking "Go!":

Details:

Edit #2:

Other things I tried, but to no avail:

• Adding async: false to the ajax call.
• Directing the ajax call to be handled by another view rather than the current view.

Edit #3:

Dependencies for this web app:

• jquery-ui-1.12.1/jquery-ui.min.css

• jquery-ui-1.12.1/jquery-ui.structure.min.css

• jquery-ui-1.12.1/jquery-ui.theme.min.css

• jquery-3.5.1.min.js

• jquery-ui-1.12.1/jquery-ui.min.js

• index.js

• index.css

• Django 3.1

Answer 1

just remove weather URL from action attribute. because it's call weather class before calling ajax.

       <form action="" method="post" autocomplete="off" id="weather_form">
            {% csrf_token %}
            {{ form.non_field_errors }}
            {{ error }}
            <ul>
                <li class="center_text">
                    <h3>Best Time to Go Out</h3>
                </li>
                <li>
                    <label>{{ form.type_of_person.label }}: </label>
                    {{ form.type_of_person }}
                    {{ form.type_of_person.errors }}
                </li>
                <li>
                    <label>{{ form.exercise.label }}: </label>
                    {{ form.exercise }}
                    {{ form.exercise.errors }}
                </li>
                <li>
                    <label>{{ form.unit.label }}: </label>
                    {{ form.unit }}
                    {{ form.unit.errors }}
                </li>
                <li>
                    <label>{{ form.zip_postal.label }}: </label>
                    {{ form.zip_postal }}
                    {{ form.zip_postal.errors }}
                </li>
                <li>
                    <input id="go" type="submit" value="Go!">
                </li>
            </ul>
        </form>

Answer 2

Finally found the root of the problem. Jesus christ.

In my index.js, I have:

var csrftoken = Cookies.get("csrftoken");

but I never imported the JavaScript Cookie library.

I ended up not using the library and solved this by replacing the above line with the following:

function getCookie(name) {
      let cookieValue = null;
      if (document.cookie && document.cookie !== '') {
          const cookies = document.cookie.split(';');
          for (let i = 0; i < cookies.length; i++) {
              const cookie = cookies[i].trim();
              // Does this cookie string begin with the name we want?
              if (cookie.substring(0, name.length + 1) === (name + '=')) {
                  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                  break;
              }
          }
      }
      return cookieValue;
}

var csrftoken = getCookie('csrftoken');