Why data passed from frontend using ajax shows NonType in view function in Django

Question

I have created a form in html which take some value from user on clicking submit button a JavaScript function is called which passes data using ajax to Django server. But instead of getting data in view function it shows NoneType error on backend.

My html form:-

<div class="cropDetail">
          <form method="post">
            {% csrf_token %}
            <div class="form__group">
              <label htmlFor="name" class="form__label"> Nitrogen </label>
              <input type="number" id="nitrogen" name="nitrogen" class="form__input" required />
              <p class="error"></p>
            </div>

            <div class="form__group">
              <label htmlFor="name" class="form__label"> Potassium </label>
              <input
                type="number"
                id="potassium"
                class="form__input"
                name="potassium"
                required
              />
              <p class="error"></p>
            </div>

            <div class="form__group">
              <label htmlFor="name" class="form__label"> Phosphorus </label>
              <input
                type="number"
                id="phosphorus"
                class="form__input"
                name="phosphorus"
                required
              />
              <p class="error"></p>
            </div>

            <div class="form__group">
              <label htmlFor="name" class="form__label"> PH </label>
              <input type="number" id="ph" class="form__input" name="ph" required />
              <p className="error"></p>
            </div>

            <div class="form__group">
              <label htmlFor="name" class="form__label"> Rainfall </label>
              <input type="number" id="rainfall" class="form__input" name="rainfall" required />
              <p class="error"></p>
            </div>

            <div class="form__group">
              <label htmlFor="name" class="form__label"> City </label>
              <input type="text" id="city" class="form__input" name="city" required />
              <p class="error"></p>
            </div>
            <div class="form__actions">
              <button onclick="passdata()">Submit</button>
            </div>
          </form>
        </div>

My JavaScript function:-

const nitro = document.getElementById("nitrogen");
const potass = document.getElementById("potassium");
const phos = document.getElementById("phosphorus");
const phi = document.getElementById("ph");
const rain = document.getElementById("rainfall");
const cityi = document.getElementById("city");

function passdata(event) {
  event.preventDefault();
  const usernitrogen = nitro.value;
  const userpotassium = potass.value;
  const userphosphorus = phos.value;
  const userph = phi.value;
  const userrainfall = rain.value;
  const usercity = cityi.value;
  console.log(usernitrogen);
  $.ajax({
    type:"POST",
    url: "crop_prediction/",
    data: {
      'nitrogen': usernitrogen,
      'potassium': userpotassium,
      'phosphorus': userphosphorus,
      'ph': userph,
      'rainfall': userrainfall,
      'city': usercity,
    },
    success: function () {
      alert(`Thankyou for your feedback`);
    },
  });
};

urls.py:-

from django.urls import path, include
from .import views

urlpatterns = [
    path('', views.home),
    path('crop_prediction/', views.crop_prediction),
    path('crop_detail/', views.crop_info)
]

Views function:-

def crop_prediction(request):
    global resultJson, firebase
    resultJson = dumps({"error": "some error"})
    if request.method == "POST":
        N = float(request.POST.get("nitrogen"))
        P = float(request.POST.get("phosphorus"))
        K = float(request.POST.get("potassium"))
        ph = float(request.POST.get("ph"))
        rainfall = float(request.POST.get("rainfall"))
        city = request.POST.get("city")
        resultJson = dumps({"error": "some error occured"})
        if weather_fetch(city) != None:
            temperature, humidity = weather_fetch(city)
            data = np.array([[N, P, K, temperature, humidity, ph, rainfall]])
            my_prediction = pickle.load(
                open('CropRecommendation\model\model.pkl', 'rb'))
            final_prediction = my_prediction.predict(data)
            value = "rice"
            firebase = firebase.FirebaseApplication(
                'https://e-farma-5dc42-default-rtdb.firebaseio.com/')
            predicted_crop_info = firebase.get(value, None)
            predicted_crop_info["crop"] = value
            resultJson = dumps(predicted_crop_info)
            return render(request, "Efarma/index.html", {"result": resultJson})
            # return render(request, 'efarma/cropDetail.html', {"result": resultJson})

    else:
        return render(request, "Efarma/index.html", {"result": resultJson})

error:- enter image description here