如何通过HTML按钮点击修改Django数据库中的字段值？

Got it, let's walk through how to build this toggle functionality step by step. We'll split this into backend (Django) and frontend (HTML/JS) components to keep things clear and easy to implement.

1. First, Confirm Your Model Setup #

Assuming you have a Job model (adjust the name if yours differs) with a status field to track activation state. Here's a typical setup:

# models.py
from django.db import models

class Job(models.Model):
    # Add your other job fields here (title, description, etc.)
    STATUS_CHOICES = [
        ('active', 'Active'),
        ('deactive', 'Deactive'),
    ]
    status = models.CharField(
        max_length=10,
        choices=STATUS_CHOICES,
        default='deactive'
    )

    def __str__(self):
        return f"Job {self.id} - {self.get_status_display()}"

2. Backend: Build the Status Update View #

We'll create a view that handles AJAX POST requests, updates the job's status in the database, and returns a JSON response to confirm the change.

2.1 View Function #

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

@csrf_exempt  # Note: For production, we'll use proper CSRF token handling (covered in frontend)
def toggle_job_status(request):
    if request.method == 'POST':
        job_id = request.POST.get('job_id')
        try:
            job = Job.objects.get(id=job_id)
            # Toggle the status based on current value
            job.status = 'active' if job.status == 'deactive' else 'deactive'
            job.save()
            return JsonResponse({'success': True, 'new_status': job.status})
        except Job.DoesNotExist:
            return JsonResponse({'success': False, 'error': 'Job not found'})
    return JsonResponse({'success': False, 'error': 'Invalid request method'})

2.2 Map the View to a URL #

Add this route to your app's urls.py:

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # Your other existing URLs...
    path('toggle-job-status/', views.toggle_job_status, name='toggle_job_status'),
]

3. Frontend: Update HTML and Add Interactive JS #

Let's complete your existing HTML snippet and add JavaScript to handle button clicks and real-time page updates.

3.1 Updated HTML Snippet #

<div class="col-sm-5">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Job activation status</h3>
        </div>
        <div class="panel-body">
            <!-- Hidden input to store job ID (pass this from your Django template context) -->
            <input type="hidden" id="job-id" value="{{ job.id }}">
            
            <!-- Display current status -->
            <p>Current Status: 
                <span id="job-status" class="badge {{ 'bg-success' if job.status == 'active' else 'bg-danger' }}">
                    {{ job.get_status_display }}
                </span>
            </p>
            
            <!-- Toggle buttons (show/hide based on current status) -->
            {% if job.status == 'deactive' %}
                <button id="activate-btn" class="btn btn-success">Activate</button>
                <button id="deactivate-btn" class="btn btn-danger" style="display: none;">Deactivate</button>
            {% else %}
                <button id="activate-btn" class="btn btn-success" style="display: none;">Activate</button>
                <button id="deactivate-btn" class="btn btn-danger">Deactivate</button>
            {% endif %}
        </div>
    </div>
</div>

3.2 JavaScript for AJAX and UI Updates #

Add this script at the bottom of your HTML page (or in a dedicated JS file):

// Grab DOM elements
const jobId = document.getElementById('job-id').value;
const statusElement = document.getElementById('job-status');
const activateBtn = document.getElementById('activate-btn');
const deactivateBtn = document.getElementById('deactivate-btn');

// Function to send status update request to Django
function updateJobStatus() {
    fetch('/toggle-job-status/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            // Include CSRF token for security (required for production)
            'X-CSRFToken': getCookie('csrftoken')
        },
        body: `job_id=${jobId}`
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Update status text and styling
            const displayStatus = data.new_status === 'active' ? 'Active' : 'Deactive';
            statusElement.textContent = displayStatus;
            statusElement.className = `badge ${data.new_status === 'active' ? 'bg-success' : 'bg-danger'}`;
            
            // Toggle button visibility
            if (data.new_status === 'active') {
                activateBtn.style.display = 'none';
                deactivateBtn.style.display = 'inline-block';
            } else {
                activateBtn.style.display = 'inline-block';
                deactivateBtn.style.display = 'none';
            }
        } else {
            alert(`Failed to update status: ${data.error}`);
        }
    })
    .catch(error => {
        console.error('Request error:', error);
        alert('An error occurred while updating the status.');
    });
}

// Helper function to retrieve CSRF token from cookies (required by Django)
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === `${name}=`) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// Attach click listeners to buttons
activateBtn.addEventListener('click', updateJobStatus);
deactivateBtn.addEventListener('click', updateJobStatus);

4. Production-Friendly Tips #

• CSRF Protection: The getCookie function handles CSRF tokens correctly—never leave @csrf_exempt in production unless you have a specific, secure alternative.
• Error Handling: Replace alert messages with more user-friendly notifications (like toast popups) for a better UX.
• Template Context: Ensure {{ job.id }} and {{ job.get_status_display }} are properly passed from your Django view to the template.

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