Hey there! Let's work through this JSON parsing issue together—task apps with AJAX/PHP/MySQL are super common, and I’ve hit similar snags before. Let’s break down the likely problems and fixes step by step:

First: Fix the PHP Output to Ensure Valid JSON #

The most common cause of JSON.parse() failures is that your PHP script is returning something other than clean JSON (like debug echoes, database error messages, extra whitespace, or HTML). Here’s a solid PHP template to avoid that:

<?php
// Critical: Set the correct content type for JSON
header('Content-Type: application/json');
$response = ['success' => false, 'tasks' => [], 'error' => ''];

// Use PDO for safer database interactions (avoids SQL injection too!)
try {
    $db = new PDO('mysql:host=localhost;dbname=your_database;charset=utf8mb4', 'your_user', 'your_pass');
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // Handle the status update first (if the request is for updating)
    if (isset($_POST['task_id'], $_POST['new_status'])) {
        $updateStmt = $db->prepare("UPDATE tasks SET status = ? WHERE id_task = ?");
        // Bind values to prevent injection
        $updateStmt->execute([$_POST['new_status'], $_POST['task_id']]);
    }

    // Fetch all active tasks (exclude REMOVE if that's your intent)
    $fetchStmt = $db->query("SELECT id_task, status, /* add your other task fields here */ FROM tasks WHERE status != 'REMOVE' OR status IS NULL");
    $tasks = $fetchStmt->fetchAll(PDO::FETCH_ASSOC);

    // Update response with valid data
    $response['success'] = true;
    $response['tasks'] = $tasks;
} catch (Exception $e) {
    // Don't expose raw errors to users in production—log them instead!
    $response['error'] = 'Failed to load tasks';
    // error_log($e->getMessage()); // Uncomment for debugging logs
}

// Output only the JSON—no extra echoes or whitespace!
echo json_encode($response);
exit; // Ensure no extra code runs after this
?>

Second: Clean Up Your AJAX Handling in JavaScript #

If your PHP is outputting valid JSON, the next step is to make sure your JS isn’t overcomplicating the parsing. Modern fetch API or jQuery can handle this automatically:

Using Vanilla JS Fetch:

function updateTaskStatus(taskId, newStatus) {
    fetch('your_php_file.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `task_id=${taskId}&new_status=${newStatus}`
    })
    .then(response => {
        // First check if the network response is valid
        if (!response.ok) throw new Error('Server error');
        // Let fetch auto-parse JSON—no need for manual JSON.parse!
        return response.json();
    })
    .then(data => {
        if (data.success) {
            // Render your task list with proper coloring
            renderTaskList(data.tasks);
        } else {
            console.error('Error:', data.error);
        }
    })
    .catch(err => console.error('Request failed:', err));
}

function renderTaskList(tasks) {
    const listContainer = document.getElementById('task-list');
    listContainer.innerHTML = '';

    tasks.forEach(task => {
        const taskItem = document.createElement('li');
        // Set color: green for DONE, black otherwise
        taskItem.style.color = task.status === 'DONE' ? 'green' : 'black';
        // Add your task content here (adjust based on your fields)
        taskItem.textContent = `Task #${task.id_task}: ${task.your_task_field}`;
        
        // Add your buttons for updating status here
        const doneBtn = document.createElement('button');
        doneBtn.textContent = 'Mark Done';
        doneBtn.onclick = () => updateTaskStatus(task.id_task, 'DONE');
        taskItem.appendChild(doneBtn);

        listContainer.appendChild(taskItem);
    });
}

Using jQuery (if you prefer):

function updateTaskStatus(taskId, newStatus) {
    $.ajax({
        url: 'your_php_file.php',
        method: 'POST',
        data: { task_id: taskId, new_status: newStatus },
        dataType: 'json', // jQuery auto-parses JSON for you!
        success: function(data) {
            if (data.success) renderTaskList(data.tasks);
            else console.error(data.error);
        },
        error: function(xhr) {
            console.error('Request failed:', xhr.responseText);
        }
    });
}

Common Pitfalls to Check #

1. Extra whitespace in PHP: Make sure there’s no space/line break before the opening <?php tag—this gets echoed and breaks JSON.
2. BOM character: Save your PHP files as UTF-8 without BOM (most code editors have this option in save settings).
3. NULL status handling: MySQL’s NULL becomes PHP’s null, which json_encode turns into null in JSON. In JS, check for task.status === null to handle the default state.
4. Debug echoes: Remove any print_r(), var_dump(), or echo statements in PHP that aren’t part of the final JSON response.

Debugging Tip #

In your browser’s DevTools (Network tab), check the AJAX request’s Response tab. If it’s not pure JSON (e.g., has error messages or HTML), that’s exactly where the problem is.

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