超详细教程-Django博客的标签值的前后端交互

效果展示

上传前：

上传后：

实现逻辑：

• 前端将后端传输的标签ID与标签名展示
• 点击确认上传博客时，前端获取已选取的标签ID，并传输到后端
• 后端获取数据后，将数据上传至数据库

PS：标签与博客之间是多对多关系，所以前端我使用CheckBox

相关代码：

前端HTML

PS：前端获取列表，后端使用函数getlist获取的值为空，所以选择用json将其转换为字符串后再传给后端

{% for tag in tags %}
    <label class="checkbox-inline ">
    <input type="checkbox" id="tag" name="tag" value="{{ tag.id }}"> {{ tag.name }}
    </label>
{% endfor %}

前端js

//获取标签值列表
function gettags() {
    var objs = document.getElementsByName('tag');
    var tags = [];
    for(var i = 0; i < objs.length; i++) {
    if (objs[i].checked) {
    	tags.push(objs[i].value);
    }
    }
    return(tags);
}

$("#create_blog").click(function () {
        //空值,数据规则验证
        var  tag_list = gettags();
		if(tag_list.length===0){
            alert('请选择博客标签')
        }
        else{
            $.ajax({
                url:"/blog/add",
                type:"post",
                data:{//当然还有其他博客数据，这里为了看起来更明确，删除掉了
                     tag_list:JSON.stringify(tag_list),//json将其转换为字符串
                     csrfmiddlewaretoken:'{{ csrf_token }}'
                },
                dataType :"json",
                success:function (reg) {
                    console.log(reg);
                    if(reg.state){
                        // 添加博客成功，跳转首页
                        location.href="/blog/index"
                    }        
            }
        });}
    });

后端获取值与创建博客

def add(request):
    if request.method == "POST":
        tag_list = request.POST.get('tag_list')
        tag_list = json.loads(tag_list)
        author_id = request.session['member']['id']
        response = {"state": False, "errmsg": ""}
        # 上传新建博客
        response['state'] = True
        print(tag_list)
        Post.objects.create(author_id=author_id).tags.add(*tag_list)
        return HttpResponse(json.dumps(response))

数据库models设计

class Post(models.Model):
    title = models.CharField(max_length=100)
    tags = models.ManyToManyField(Tag, blank=True)


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