我无法将Json数据发送到Djangoviews.py，我尝试使用Ajax，但它不起作用，而且还显示CSRF错误

Question

在发出 AJAX POST 请求时，我在 Django 项目中遇到 CSRF 验证问题。这是我的代码的简化版本：

**注册.html ***

 <form  method="POST" onsubmit="return validateForm()">
(----this revieves the data------)
          {% csrf_token %}

          <label for="name">Name:</label>
          <input type="text" id="name" name="name" required />

          <label for="email">Email:</label>
          <input type="email" id="email" name="email" required />

          <label for="password">Password:</label>
          <input type="password" id="password" name="password" required />

          <input type="submit" value="Register"  name="createuser"/>
        </form>

      </div>
    </div>
  
  <script>
    let URLd ="{% url 'defaultpg' %}"
    let  nameInput = document.getElementById("name");
    let  emailInput = document.getElementById("email");
    let  passwordInput = document.getElementById("password");
(------below funtion validates it -----)
    function validateForm() {
      var csrfToken = $("input[name='csrfmiddlewaretoken']");

      let nameValue = nameInput.value;
      let emailValue = emailInput.value;
      let passwordValue = passwordInput.value;
      let isNameValid = /^[a-zA-Z]+$/.test(nameValue);
      let isEmailValid = /^\S+@\S+\.\S+$/.test(emailValue);
      let isPasswordValid = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$/.test(passwordValue);
      if (isNameValid) {
        if (isEmailValid) {
          if (isPasswordValid) {
            alert("Successful");
            $.ajax({
              type: "POST",
              url: '/defaultpg',
              headers: {"X-CSRFToken":'{{ csrf_token }}'},
              data: {
                "name": nameValue,
                "email": emailValue,
                "password": passwordValue,
                'csrfmiddlewaretoken': $("input[name=csrfmiddlewaretoken]")
            },          
              dataType: "json",
              success: function (data) {
                  // any process in data
                  alert("successful");
              },
              error: function () {
                  alert("failure");
              }
          });
          } else {
            alert("Password must contain letters, capital letter, small letter, special character, and numbers with a length above 8");
          }
        } else {
          alert("Please enter a valid Email Address");
        }
      } else {
        alert("Please enter a valid Name");
      }
    }
</script>

view.py
@csrf_protect
def defaultpg(request):
    if request.method == "POST":
        name = request.POST.get('name')
        email = request.POST.get('email')
        password = request.POST.get('password')

        print("------------------------")
        print(name)
        print(email)
        print(password)
        print("------------------------")

#I put print statement just to see whether data is received or not 
        return redirect('Entry')

urls .py
    path('eafterhome/', views.defaultpg, name='defaultpg'),

我只想通过 view.defaultpg 接收数据，我是 django 新手，我正在为我的最后一年项目做这个，如果有一点帮助就好了

Answer 1

试试这个。

<form  method="POST" id="someForm">
    {% csrf_token %}

    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required />

    <input type="submit" value="Register"  name="createuser"/>
</form>

  <script>
    const someForm = document.getElementById("someForm")

    someForm.addEventListener("submit", (e) => {
        e.preventDefault() // prevent default behavior of the form

        var csrfToken = $("input[name='csrfmiddlewaretoken']").val();
        
        // rest of your logic goes here....
    })

</script>

另请注意：如果您将 json 数据发送到 django 视图..您可以像这样处理传入数据：

def defaultpg(request):
    if request.method == "POST":
        import json
        data = json.loads(request.body.decode('utf-8'))
        name = data.get("name")
        email = data.get('email')
        password = data.get('password')