在Django中使用AJAX发布表单

<form id="myForm">
  <input type="text" name="name" placeholder="Name">
  <input type="email" name="email" placeholder="Email">
  <button type="submit">Submit</button>
</form>

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

    var formData = new FormData(this); // 获取表单数据
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/submit-form"); // 发送POST请求到后端处理视图函数的URL
    xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); // 设置请求头，标识为AJAX请求
    xhr.onload = function() {
      if (xhr.status === 200) {
        var response = JSON.parse(xhr.responseText);
        // 处理后端返回的结果
        console.log(response);
      }
    };
    xhr.send(formData); // 发送表单数据
  });
</script>

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def submit_form(request):
    if request.method == "POST" and request.is_ajax():
        name = request.POST.get("name")
        email = request.POST.get("email")
        
        # 在这里进行表单数据的验证和处理
        # ...
        
        response_data = {
            "message": "Form submitted successfully",
            "name": name,
            "email": email
        }
        return JsonResponse(response_data)
    else:
        return JsonResponse({"error": "Invalid request"})