如何修改jQuery代码，将PHP从数据库获取的数据传递到指定div？

嘿，我来帮你搞定这个问题！你的核心需求是把数据库里的产品数据（ID、名称、描述、图片、成本）动态加载到jQuery生成的表单里，替换原来硬编码的固定结构。下面是具体的修改步骤和代码示例，非常实用：

1. 先写PHP接口，从数据库拉取产品数据 #

首先得有个PHP文件（比如命名为get_products.php），用来连接数据库、查询数据，然后返回JSON格式的结果——这样JS才能方便处理：

<?php
// 替换成你的数据库连接信息
$servername = "localhost";
$username = "你的数据库用户名";
$password = "你的数据库密码";
$dbname = "你的数据库名";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 查询所有产品（如果需要特定产品，可以加WHERE条件）
$sql = "SELECT ID, product_name, product_description, image, cost FROM 你的表名";
$result = $conn->query($sql);

$products = [];
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
}

// 返回JSON格式的数据，让JS能直接解析
header('Content-Type: application/json');
echo json_encode($products);

$conn->close();
?>

2. 修改JavaScript代码，动态加载并渲染数据 #

原来的JS里contentToLoad是硬写的字符串，现在要改成通过AJAX请求PHP接口拿数据，然后生成带产品信息的表单结构。另外你原来的删除按钮事件（a.de...）我也帮你完善了：

$(function() {
    var number = 1;

    // 点击"添加"按钮时，先拉取产品数据再渲染表单
    $('a.add').click(function(e) {
        e.preventDefault();
        
        // 用AJAX请求PHP接口获取产品数据
        $.ajax({
            url: 'get_products.php', // 刚才写的PHP文件路径，注意路径要正确
            type: 'GET',
            dataType: 'json',
            success: function(products) {
                // 动态生成带产品选项的表单结构，这里示例做了产品选择下拉+详情展示
                var contentToLoad = `
                    <div class="product-item" data-id="${number}">
                        <h4>产品 ${number}</h4>
                        <select class="product-select">
                            <option value="">请选择产品</option>
                            ${products.map(product => `
                                <option value="${product.ID}" 
                                        data-name="${product.product_name}"
                                        data-desc="${product.product_description}"
                                        data-image="${product.image}"
                                        data-cost="${product.cost}">
                                    ${product.product_name} - $${product.cost}
                                </option>
                            `).join('')}
                        </select>
                        <div class="product-details" style="display:none;">
                            <p><strong>产品描述:</strong> <span class="desc"></span></p>
                            <img class="product-img" src="" alt="产品图片" style="width:100px; margin:10px 0;">
                            <p><strong>成本:</strong> $<span class="cost"></span></p>
                        </div>
                        <a href="#" class="delete">删除该产品项</a>
                    </div>
                `;
                
                // 把生成的内容追加到#calc容器里
                $('#calc').append(contentToLoad);
                number++;
            },
            error: function() {
                alert('加载产品数据失败啦，请稍后重试~');
            }
        });
    });

    // 当选择产品时，自动展示对应的产品详情
    $('#calc').on('change', '.product-select', function() {
        var selectedOpt = $(this).find('option:selected');
        var detailsBox = $(this).siblings('.product-details');
        
        if (selectedOpt.val()) {
            detailsBox.show();
            // 从data属性里读取产品数据并填充到页面
            detailsBox.find('.desc').text(selectedOpt.data('desc'));
            detailsBox.find('.product-img').attr('src', selectedOpt.data('image'));
            detailsBox.find('.cost').text(selectedOpt.data('cost'));
        } else {
            detailsBox.hide();
        }
    });

    // 处理删除按钮的点击事件（动态元素必须用事件委托）
    $('#calc').on('click', 'a.delete', function(e) {
        e.preventDefault();
        $(this).closest('.product-item').remove();
        // 如果需要重新编号产品，可以在这里调整number变量
    });
});

3. 关键修改点说明 #

• 替换硬编码内容为AJAX动态请求：不再用固定的字符串，而是从PHP接口拉取真实的数据库数据，生成动态表单。
• 用data属性绑定产品数据：把产品的描述、图片、成本等数据存在下拉选项的data-*属性里，选择产品时直接读取展示，不用再次请求数据库，效率更高。
• 完善事件委托：因为是动态生成的元素，所有交互事件（比如删除、产品选择）都要绑定到父容器#calc上，这样新添加的元素也能触发事件。
• 增加错误提示：AJAX请求失败时给用户反馈，避免用户一脸懵。

4. 额外优化小建议 #

• 如果每次只需要加载单个特定产品，可以在AJAX请求时传参数（比如?product_id=123），让PHP返回对应产品的数据。
• 可以把HTML模板抽成单独的<script type="text/template">标签，代码会更清晰易维护：

  <script type="text/template" id="product-item-template">
      <div class="product-item" data-id="{{itemNumber}}">
          <h4>产品 {{itemNumber}}</h4>
          <!-- 这里放模板内容，用{{变量名}}占位 -->
      </div>
  </script>
  

  然后在JS里用字符串替换或者简单的模板引擎填充数据。
• 如果表单需要提交到后台，记得收集所有动态生成的产品数据，用AJAX提交到PHP处理即可。

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