<form id="change-password-form">
  <input type="password" id="new-password" placeholder="New Password">
  <input type="password" id="confirm-password" placeholder="Confirm Password">
  <button type="submit">Change Password</button>
</form>

<script>
  document.getElementById("change-password-form").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    var newPassword = document.getElementById("new-password").value;
    var confirmPassword = document.getElementById("confirm-password").value;

    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/change-password/", true);
    xhr.setRequestHeader("Content-Type", "application/json");

    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          alert(response.message);
        } else {
          alert("Failed to change password.");
        }
      }
    };

    var data = JSON.stringify({
      "new_password": newPassword,
      "confirm_password": confirmPassword
    });

    xhr.send(data);
  });
</script>

from django.contrib.auth import authenticate, login
from django.http import JsonResponse

def change_password(request):
    if request.method == "POST":
        user = authenticate(request, username=request.user.username, password=request.POST.get("current_password"))

        if user is not None:
            new_password = request.POST.get("new_password")
            confirm_password = request.POST.get("confirm_password")

            if new_password == confirm_password:
                user.set_password(new_password)
                user.save()

                login(request, user)

                return JsonResponse({"message": "Password changed successfully."})
            else:
                return JsonResponse({"message": "New password and confirm password do not match."})
        else:
            return JsonResponse({"message": "Current password is incorrect."})

    return JsonResponse({"message": "Invalid request method."})