Django项目：如何让用户无需JSON语法提交书籍作者字段？

这是一项学校作业，要求在简单Django项目的模型中使用JSON字段。该项目为读书俱乐部网站，需支持用户向服务器提交新书，且希望用户无需掌握JSON语法即可输入。

当前书籍模型代码：

class Book(models.Model):

    #book information
    name = models.CharField(default='title', max_length=100) #Name of the book
    authors = models.JSONField() #Author of the book
    year_published = models.IntegerField() #Year the book was published in 
    date_added = models.DateTimeField(auto_now=True) #Date added (automatic)
    date_modified = models.DateTimeField(auto_now_add=True) #Date modified (automatic)

    def __str__(self): #Return the full title of the book with its author and publish year.
        fullname = f"{self.authors}.{self.name};({self.year_published})"
        return fullname

提交表单代码：

class AddBook(forms.ModelForm):
    class Meta:
        model = Book
        fields = "__all__"

添加书籍视图代码：

def addbook(request):
    if request.method != 'POST':
        #no data submitted
        form = AddBook()

    else:
        form = AddBook(data=request.POST)
        print(form.errors)
        if form.is_valid():
            form.save(commit=True)
            return redirect('cbc:books')
        
    context = {'form': form}
    return render(request, 'cbc/addbook.html', context)

当前功能可正常运行，但由于authors字段为JSON类型，用户必须输入带引号的JSON格式（如"John Smith"）才能通过表单验证，操作极不直观。

1. 自定义表单字段，自动转换输入为JSON格式 #

无需修改模型，仅在表单中替换默认的JSON输入控件为普通文本框，再通过表单的清理方法将用户输入转换为合法的JSON格式。

示例代码：

import json
from django import forms
from .models import Book

class AddBook(forms.ModelForm):
    # 替换默认JSON字段为普通文本输入
    authors = forms.CharField(label='作者', max_length=200)

    class Meta:
        model = Book
        fields = "__all__"

    def clean_authors(self):
        # 获取用户输入的原始文本
        authors_input = self.cleaned_data.get('authors').strip()
        # 单个作者：转换为JSON字符串
        return json.dumps(authors_input)
        # 若支持多作者（用户用逗号分隔），可转换为JSON数组：
        # author_list = [name.strip() for name in authors_input.split(',') if name.strip()]
        # return json.dumps(author_list)

用户只需输入普通文本，表单会自动完成JSON格式转换，无需手动添加引号。

2. 修改模型字段的默认表单控件 #

在模型的JSONField中指定默认使用普通文本输入控件，再配合表单清理方法完成转换：

# 模型中修改authors字段
authors = models.JSONField(form_class=forms.CharField)

之后同样在表单中添加clean_authors方法处理输入转换，逻辑同方法1。这种方式更简洁，但灵活性不如自定义表单字段。

3. 调整模型为多对多关系（若作业允许） #

如果作业未强制要求使用JSON字段，书籍与作者的关系更适合用多对多关联，这更符合数据库设计规范，用户体验也更好：

class Author(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

class Book(models.Model):
    name = models.CharField(default='title', max_length=100)
    authors = models.ManyToManyField(Author)
    year_published = models.IntegerField()
    date_added = models.DateTimeField(auto_now=True)
    date_modified = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        author_names = ", ".join([author.name for author in self.authors.all()])
        return f"{author_names}.{self.name};({self.year_published})"

此时表单会自动生成多选控件，用户可直接选择或添加作者，完全无需接触JSON语法。

4. 前端JS辅助转换（需配合后端校验） #

在前端页面添加JavaScript，监听表单提交事件，将用户输入转换为JSON格式后再提交：

document.querySelector('form').addEventListener('submit', function(e) {
    const authorInput = document.querySelector('input[name="authors"]');
    // 单个作者转换为JSON字符串
    authorInput.value = JSON.stringify(authorInput.value.trim());
    // 多作者转换为JSON数组：
    // const authors = authorInput.value.split(',').map(name => name.trim()).filter(Boolean);
    // authorInput.value = JSON.stringify(authors);
});

这种方式无需修改后端，但依赖JavaScript，建议同时保留后端的clean_authors方法做二次校验，避免用户禁用JS时出现错误。

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