一 修改檢視函式mysite/article/views.py

from django.shortcuts import render, get_object_or_404
from django.contrib.auth.decorators import login_required
from django.views.decorators.csrf import csrf_exempt
from django.http import HttpResponse
from .models import ArticleColumn
from .forms import ArticleColumnForm

import json

@login_required(login_url='/account/login/')
# 在檢視函式前面新增修飾器的方式是解決提交表單CSRF問題的一種方式
@csrf_exempt
def article_column(request):
    if request.method == "GET":
        columns = ArticleColumn.objects.filter(user=request.user)
        column_form = ArticleColumnForm()
        return render(request, "article/column/article_column.html", {"columns": columns, 'column_form': column_form})

    if request.method == "POST":
        column_name = request.POST['column']
        # 兩個過濾條件，一個是當前使用者，另外一個是欄目名稱
        columns = ArticleColumn.objects.filter(user_id=request.user.id, column=column_name)
        if columns:
            return HttpResponse('2')
        else:
            ArticleColumn.objects.create(user=request.user, column=column_name)
            return HttpResponse("1")
 

二 編輯前端頁面mysite/templates/article/column/article_column.html

{% extends "article/base.html" %}
{% load staticfiles %}
{% block title %}article column{% endblock %} {% block content %}
<div>
    <p class="text-right">
        <button id="add_column" onclick="add_column()" class="btn btn-primary">新增欄目</button>
    </p>
    <table class="table table-hover">
        <tr>
            <td>序號</td>
            <td>欄目名稱</td>
            <td>操作</td>
        </tr>
        {% for column in columns %}
        <tr>
            <td>{{ forloop.counter }}</td>
            <td>{{ column.column }}</td>
            <td>
            </td>
        </tr>
        {% empty %}
        <p>還沒有設定欄目，太懶了。</p>
        {% endfor %}
    </table>
</div>

<script type="text/javascript" src='{% static "js/jquery.js" %}'></script>
<script type="text/javascript" src="{% static 'js/layer.js'%}"></script>
<script type="text/javascript">
    function add_column() {
        var index = layer.open({
            type: 1,
            skin: "layui-layer-rim",
            area: ["400px", "200px"],
            title: "新增欄目",
            content: '<div class="text-center" style="margin-top:20px">\
                <p> 請輸入新的欄目名稱</p>\
                <p>{{ column_form.column }}</p></div > ',
            btn: ['確定', '取消'],
            yes: function (index, layero) {
                column_name = $('#id_column').val();
                $.ajax({
                    url: '{% url "article:article_column" %}',
                    type: 'POST',
                    data: { "column": column_name },
                    success: function (e) {
                        if (e == "1") {
                            parent.location.reload();
                            layer.msg("成功新增");
                        } else {
                            layer.msg("此欄目已有，請更換名稱")
                        }
                    },
                });
            },
            btn2: function (index, layero) {
                layer.close(index);
            }
        });
    }


</script>
 

三 測試