基于AJAX与PHP解析多国家多属性电商定价复杂表单的技术问询

Got it, let's walk through how to handle this complex multi-country pricing form with AJAX and PHP. Your current code builds a table where each row represents a product attribute variant (like size or color) and each column is a price input for a specific country. Here's a step-by-step solution to submit and parse this form smoothly:

1. Refine Your Form Naming Convention #

First, let's fix the form element names to create a structured, easy-to-parse data format. Instead of using generic checkbox1 or priceValue1, use nested arrays that tie variants to countries directly. This will make both front-end collection and back-end parsing way simpler.

Update your PHP form generation code like this:

// After fetching your attribute data
$price_form .= "<form id='pricing-form'>"; // Wrap table in a form with an ID
$price_form .= "<table class='table'>";
$price_form .= "<thead>";
$price_form .= "<th><input type='checkbox' id='select-all'> Select All</th>"; // Optional bulk select
$price_form .= "<td>$attribute_name</td>";

// Fetch countries (reuse your existing query)
$countryStmt = DB::run("SELECT id, country FROM countries");
while ($countryRow = $countryStmt->fetch(PDO::FETCH_ASSOC)) {
    $country_id = $countryRow["id"];
    $country_name = htmlspecialchars($countryRow["country"], ENT_QUOTES); // Escape for XSS safety
    $price_form .= "<td>$country_name</td>";
}
$price_form .= "</thead><tbody>";

// Loop through attribute variants (your existing 1-15 loop)
foreach ($attributeResult as $attrRow) {
    for ($i = 1; $i <= 15; $i++) {
        $attributeColumn = "attribute".$i;
        $variantValue = $attrRow[$attributeColumn];
        
        if (!empty($variantValue)) {
            // Create a unique ID for this variant (tie to attribute ID + index)
            $variant_id = "{$attrRow['id']}_{$i}";
            $variantLabel = htmlspecialchars($variantValue, ENT_QUOTES);
            
            $price_form .= "<tr>";
            // Checkbox to mark variant for saving
            $price_form .= "<td><input type='checkbox' name='selected_variants[]' value='$variant_id' class='variant-checkbox'></td>";
            $price_form .= "<td>$variantLabel</td>";
            
            // Re-fetch countries to generate price inputs per country
            $countryStmt = DB::run("SELECT id, country FROM countries");
            while ($countryRow = $countryStmt->fetch(PDO::FETCH_ASSOC)) {
                $country_id = $countryRow["id"];
                // Price input tied to variant + country
                $price_form .= "<td>
                    <input type='number' step='0.01' name='prices[$variant_id][$country_id]' placeholder='0.00' class='price-input'>
                    <select name='currencies[$variant_id][$country_id]'>
                        <option value='USD'>USD</option>
                        <option value='EUR'>EUR</option>
                        <option value='GBP'>GBP</option>
                        <!-- Add other currencies as needed -->
                    </select>
                </td>";
            }
            $price_form .= "</tr>";
        }
    }
}

$price_form .= "</tbody></table>";
$price_form .= "<button type='submit' class='btn btn-primary'>Save Prices</button>";
$price_form .= "</form>";

2. AJAX Submission Code (Front-End) #

Use jQuery (or vanilla JS) to collect the form data and send it to your PHP backend without page reload. Add this script at the bottom of your page:

$(document).ready(function() {
    // Optional: Bulk select/deselect all variants
    $('#select-all').click(function() {
        $('.variant-checkbox').prop('checked', $(this).prop('checked'));
    });

    // Handle form submission
    $('#pricing-form').submit(function(e) {
        e.preventDefault(); // Stop default form reload

        // Show loading state (optional but improves UX)
        $('#pricing-form button').text('Saving...').prop('disabled', true);

        // Collect form data as a structured object
        var formData = $(this).serializeArray();

        // Send AJAX request
        $.ajax({
            url: 'save_pricing.php', // Your backend handler file
            type: 'POST',
            data: formData,
            dataType: 'json',
            success: function(response) {
                // Reset button state
                $('#pricing-form button').text('Save Prices').prop('disabled', false);
                
                if (response.success) {
                    alert('Prices saved successfully!');
                    // Optional: Refresh form or clear inputs
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr, status, error) {
                $('#pricing-form button').text('Save Prices').prop('disabled', false);
                console.error('AJAX Error:', error);
                alert('Failed to save prices. Please try again.');
            }
        });
    });
});

3. Back-End PHP Parsing & Saving (save_pricing.php) #

This script will receive the AJAX data, validate it, and save/update prices in your database. We'll use transactions to ensure data consistency.

<?php
// Load your database configuration/DB class
require_once 'db_config.php';

// Only accept POST requests
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    echo json_encode(['success' => false, 'message' => 'Invalid request method']);
    exit;
}

// Get submitted data
$selectedVariants = $_POST['selected_variants'] ?? [];
$prices = $_POST['prices'] ?? [];
$currencies = $_POST['currencies'] ?? [];

// Basic validation
if (empty($selectedVariants)) {
    echo json_encode(['success' => false, 'message' => 'No variants selected to save']);
    exit;
}

// Use database transactions to avoid partial saves
try {
    DB::beginTransaction();

    foreach ($selectedVariants as $variantId) {
        // Split variant ID to get original attribute ID and index (matches our naming)
        list($attributeId, $variantIndex) = explode('_', $variantId);

        // Loop through each country's price for this variant
        foreach ($prices[$variantId] as $countryId => $price) {
            $currency = $currencies[$variantId][$countryId] ?? 'USD';

            // Validate price is a positive number
            if (!is_numeric($price) || $price < 0) {
                throw new Exception("Invalid price for variant '$variantId' in country ID $countryId");
            }

            // Check if price already exists for this variant + country
            $checkSql = "SELECT id FROM product_prices WHERE attribute_id = ? AND variant_index = ? AND country_id = ?";
            $checkStmt = DB::run($checkSql, [$attributeId, $variantIndex, $countryId]);

            if ($checkStmt->rowCount() > 0) {
                // Update existing price
                $updateSql = "UPDATE product_prices SET price = ?, currency = ? WHERE attribute_id = ? AND variant_index = ? AND country_id = ?";
                DB::run($updateSql, [$price, $currency, $attributeId, $variantIndex, $countryId]);
            } else {
                // Insert new price
                $insertSql = "INSERT INTO product_prices (attribute_id, variant_index, country_id, price, currency) VALUES (?, ?, ?, ?, ?)";
                DB::run($insertSql, [$attributeId, $variantIndex, $countryId, $price, $currency]);
            }
        }
    }

    // Commit transaction if all operations succeed
    DB::commit();
    echo json_encode(['success' => true, 'message' => 'Prices saved successfully']);
} catch (Exception $e) {
    // Roll back on error
    DB::rollBack();
    echo json_encode(['success' => false, 'message' => $e->getMessage()]);
}
?>

Key Notes for Reliability #

• XSS Protection: Always escape dynamic content (like attribute names or country names) with htmlspecialchars() to prevent cross-site scripting attacks.
• Data Validation: Never trust front-end input—validate all prices, variant IDs, and country IDs on the back-end to avoid invalid or malicious data.
• Transaction Safety: Using database transactions ensures that if one price save fails, none of the changes are persisted, keeping your data consistent.
• UX Improvements: Add loading states, success/error messages, and bulk select to make the form easier to use.

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