在前后端分离的Django项目中如何将前端传入的JSON转换为表单？

Hey Alan, I get exactly where you're stuck here. When building a decoupled Django API that accepts JSON (instead of traditional form-encoded data), request.POST won't hold your frontend's input—this attribute only gets populated for requests with the application/x-www-form-urlencoded content type. To make your CustomUserCreationForm work with JSON, you need to manually parse the raw JSON data from the request body and feed it to the form. Let's walk through the fix:

Step-by-Step Explanation #

• Problem with your original code: You're passing request.POST to the form, but since your frontend sends JSON, this dictionary is empty. That's why form.is_valid() never triggers the success logic.
• Solution: Parse the raw JSON from request.body into a Python dictionary, then use that dictionary as the form's data source.

Modified Working Code #

import json
from django.http import JsonResponse, HttpResponseBadRequest
from django.views.decorators.http import require_http_methods
# Import your custom form here
from .forms import CustomUserCreationForm

@require_http_methods(["POST"])
def register(request):
    # Parse JSON payload from request body
    try:
        payload = json.loads(request.body)
    except json.JSONDecodeError:
        # Handle invalid JSON cases
        return HttpResponseBadRequest(
            json.dumps({"status": "error", "message": "Invalid JSON format"}),
            content_type="application/json"
        )
    
    # Initialize form with parsed JSON data
    form = CustomUserCreationForm(data=payload)
    response = {"status": "success"}
    
    if form.is_valid():
        new_user = form.save()
        print("User created successfully")
        # Optional: Add user details to the response
        response["user_id"] = new_user.id
        response["username"] = new_user.username
    else:
        # Return form validation errors to frontend
        response["status"] = "error"
        # Convert form errors to a clean JSON-compatible format
        response["errors"] = {field: errors[0] for field, errors in form.errors.items()}
    
    return JsonResponse(response)

Key Notes to Remember #

• Frontend Request Header: Make sure your frontend sets the Content-Type: application/json header when sending the POST request. Without this, some setups might not send the JSON data correctly, or Django might process it incorrectly.
• Field Name Matching: Ensure the keys in your frontend's JSON payload exactly match the field names defined in CustomUserCreationForm (e.g., if your form uses username, the JSON should have a username key).
• Error Handling: The code above adds handling for invalid JSON and form validation errors, which helps your frontend give meaningful feedback to users.

内容的提问来源于stack exchange，提问作者Alan K