在Django应用程序中通过Ajax简单插入和删除数据库

# views.py
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import Item

@csrf_exempt
def add_item(request):
    if request.method == 'POST':
        name = request.POST.get('name')
        item = Item(name=name)
        item.save()
        return JsonResponse({'status': 'success', 'item_id': item.id})
    return JsonResponse({'status': 'error'})

@csrf_exempt
def delete_item(request, item_id):
    if request.method == 'POST':
        try:
            item = Item.objects.get(id=item_id)
            item.delete()
            return JsonResponse({'status': 'success'})
        except Item.DoesNotExist:
            pass
    return JsonResponse({'status': 'error'})

# urls.py
from django.urls import path
from .views import add_item, delete_item

urlpatterns = [
    path('add_item/', add_item, name='add_item'),
    path('delete_item/<int:item_id>/', delete_item, name='delete_item'),
]

// script.js
document.addEventListener('DOMContentLoaded', function() {
    // 添加项目
    document.getElementById('add-item-form').addEventListener('submit', function(event) {
        event.preventDefault();
        const name = document.getElementById('item-name').value;
        fetch('/add_item/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRFToken': getCookie('csrftoken') // 获取CSRF令牌
            },
            body: `name=${encodeURIComponent(name)}`
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                alert('Item added successfully!');
            } else {
                alert('Failed to add item.');
            }
        });
    });

    // 删除项目
    document.querySelectorAll('.delete-item').forEach(button => {
        button.addEventListener('click', function() {
            const itemId = this.getAttribute('data-id');
            fetch(`/delete_item/${itemId}/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    alert('Item deleted successfully!');
                    this.parentElement.remove(); // 删除对应的DOM元素
                } else {
                    alert('Failed to delete item.');
                }
            });
        });
    });

    // 辅助函数：获取cookie
    function getCookie(name) {
        const value = `; ${document.cookie}`;
        const parts = value.split(`; ${name}=`);
        if (parts.length === 2) return parts.pop().split(';').shift();
    }
});