如何通过AJAX传递动态参数获取MySQL数据实现行点击结果追加

• 违反HTML id唯一性规范：循环生成表格行时重复使用add-btn、getID作为元素id，JS取值时永远只会匹配页面中第一个同id元素，无法拿到当前点击行的对应ID。
• 自定义数据存储不规范：<td>标签原生无value属性，硬加的自定义属性不符合DOM标准，取值容易出现异常。
• 输出的HTML结构残缺：PHP拼接表格时，末尾的</table></div>标签没有追加到$return变量中，输出的DOM结构不完整，会导致事件绑定、渲染异常。
• 取值无上下文关联：点击事件触发时没有限定在当前点击行范围内查找元素，跨范围取值很容易拿到错误数据。

PHP搜索输出部分 #

<?php
require ('config/searchConfig.php');
$return = '';
if(isset($_POST["query"]) && !empty($_POST['query']))
{
    $search = mysqli_real_escape_string($conn, $_POST["query"]);
    $query = "SELECT * FROM products WHERE productName  LIKE '%".$search."%' ORDER BY ID DESC " ;
    $result = mysqli_query($conn, $query);
    if(mysqli_num_rows($result) > 0)
    {
        $return .='
        <div class="table-responsive">
        <table class="table table-striped">
        <tr>
            <th>ID</th>
            <th>Product Name</th>
            <th>Price</th>
        </tr>';
        while($row1 = mysqli_fetch_array($result))
        {
            // 重复id全部替换为class，行元素上用标准data属性存储当前行的产品ID
            $return .= '
            <tr class="add-btn" data-id="'.$row1["ID"].'" style="height:5em;">
            <td>'.$row1["ID"].'</td>
            <td>'.$row1["productName"].'</td>
            <td>GHC '.$row1["price"].'.00</td>
            </tr>
            ';
        }
        // 补上之前遗漏的表格、容器闭合标签拼接
        $return .= '</table></div>';
        echo $return;
    }
    else{
        echo 'No product Found with that Name';
    }
}
?>

前端点击交互部分 #

<script type="text/javascript">
// 事件绑定使用class选择器，匹配所有可点击的表格行
$(document).on('click', '.add-btn', function() {
    // 直接从当前点击的行元素上读取预存的产品ID，不会出现取值错误
    var getID = $(this).data('id');
    // 可选防重复提交：如果当前行已经点击过，直接终止请求，避免重复追加内容
    if($(this).hasClass('is-clicked')) return;
    $(this).addClass('is-clicked');

    $.ajax({
        url:"getPrice.php",
        method:"GET",
        data:{getID:getID},             
        success: function(data){                    
            $("#dynamicAddRemove").append(data);  
        }
    });
});
</script>

后端getPrice.php接口必须对传入的getID参数做合法性校验，建议直接用intval($_GET['getID'])将参数转为整数后再执行数据库查询，避免SQL注入风险。如果不需要限制同一行只能点击一次，删掉JS里判断is-clicked类的代码即可。

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