如何用JS和PHP将HTML div数据存入MySQL并传递net_total至PHP变量

Got it, let's break down how to tackle both of your requirements step by step. Below is a practical, step-by-step solution using JavaScript and PHP:

第一步：把net_total的值传递给PHP变量$l #

Since JavaScript runs on the frontend and PHP on the backend, we need to bridge the gap by sending the calculated total from the browser to the server. Here are two common methods:

方式1：使用隐藏表单字段 + 表单提交 #

This is straightforward for scenarios where you're using a traditional form submission:

1. Add a hidden input to your page to store the calculated total:

<input type="hidden" id="hidden_net_total" name="net_total" value="">

2. Update your existing net_total() function to populate this hidden input when calculating the total:

function net_total() { 
    var net_total = 0; 
    $('.qty').each(function() { 
        var row = $(this).parent().parent(); 
        var price = row.find('.price').val(); 
        var total = price * $(this).val() - 0; 
        row.find('.total').val(total); 
    }) 
    $('.total').each(function() { 
        net_total += ($(this).val() - 0); 
    }) 
    $('.net_total').html("Total : $ " + net_total); 
    // Add this line to save the total to the hidden input
    $('#hidden_net_total').val(net_total);
}

3. Wrap your content in a form that submits to a PHP processing file (e.g., process.php):

<form method="POST" action="process.php">
    <!-- Your existing form elements go here -->
    <input type="hidden" id="hidden_net_total" name="net_total" value="">
    <button type="submit" onclick="net_total()">Submit Total</button>
</form>

4. In process.php, receive the value and store it in $l:

<?php
// Check if the total was submitted
if(isset($_POST['net_total'])){
    $l = $_POST['net_total'];
    // Test with: echo "Received total: $" . $l;
}
?>

方式2：使用AJAX异步传递（no page refresh） #

If you want to send the data without reloading the page, use AJAX:

1. Update your net_total() function to send an AJAX request after calculating the total:

function net_total() { 
    var net_total = 0; 
    $('.qty').each(function() { 
        var row = $(this).parent().parent(); 
        var price = row.find('.price').val(); 
        var total = price * $(this).val() - 0; 
        row.find('.total').val(total); 
    }) 
    $('.total').each(function() { 
        net_total += ($(this).val() - 0); 
    }) 
    $('.net_total').html("Total : $ " + net_total); 

    // Send total to PHP via AJAX
    $.ajax({
        url: 'process.php',
        type: 'POST',
        data: {net_total: net_total},
        success: function(response) {
            console.log('Data sent successfully:', response);
        },
        error: function(xhr) {
            console.error('Failed to send data:', xhr);
        }
    });
}

2. The same process.php code from above will work to capture the value into $l.

第二步：将$l的值推送至MySQL数据库 #

Now that we have the total stored in $l, let's insert it into a MySQL database. Make sure to follow security best practices:

<?php
if(isset($_POST['net_total'])){
    $l = $_POST['net_total'];

    // Database connection details (replace with your own)
    $servername = "localhost";
    $db_username = "your_db_username";
    $db_password = "your_db_password";
    $dbname = "your_db_name";

    // Create connection
    $conn = new mysqli($servername, $db_username, $db_password, $dbname);

    // Check connection
    if ($conn->connect_error) {
        die("Connection failed: " . $conn->connect_error);
    }

    // Use prepared statements to prevent SQL injection
    $sql = "INSERT INTO orders (total_amount) VALUES (?)";
    $stmt = $conn->prepare($sql);
    // "d" = double (use "s" for string if needed; adjust based on your table schema)
    $stmt->bind_param("d", $l);

    // Execute the query
    if ($stmt->execute()) {
        echo "Total saved to database! Order ID: " . $stmt->insert_id;
    } else {
        echo "Error saving total: " . $stmt->error;
    }

    // Clean up
    $stmt->close();
    $conn->close();
}
?>

Important Notes #

• Always use prepared statements (like above) to protect against SQL injection attacks. Never directly insert user input into SQL queries.
• For currency values, use a DECIMAL(10,2) field type in your MySQL table to avoid floating-point precision issues.
• Verify that your database user has the necessary permissions to insert data into the target table.
• Test the data flow step-by-step: first confirm the frontend calculates the total correctly, then check that PHP receives it, then verify the database insertion works.

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