如何使用 ajax mysql php 检索数据加载多个 div答案

【问题标题】：How to load multiple divs with ajax mysql php retrieved data如何使用 ajax mysql php 检索数据加载多个 div
【发布时间】：2012-01-31 16:13:31
【问题描述】：

我在 MySQL 中有多个图像路径。通过 $.ajax 我正在检索路径，但它显示在一个 div 中，我想将一个图像路径放在一个 div 中...如果检索到 25 个图像路径，则可以创建 25 个 div，每个 div 填充一个检索到的路径.简而言之，n 个图像的 n 个 div。

这是 jQuery 代码之后的 php 代码：

$family = mysql_real_escape_string($_REQUEST['send_txt'], $link);
$query = "SELECT imgurl FROM images WHERE family='$family'";


$result = mysql_query($query, $link);

echo "<table>";
if(mysql_num_rows($result) > 0){

    while($row = mysql_fetch_array($result)){
        echo "<tr><td>".$row['imgurl']."</td></tr>";
                }
}else{
    echo "<tr><td>No results matching family \"$family\"</td></tr>";
}
echo "</table>";

jQuery 代码

$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).text();  
        $.ajax({
            type: 'POST',
            url: 'thegamer.php',
            data: {send_txt: txt},
            success: function( data ){

//现在如何将数据分配给 jquery 对象并通过循环检索图像路径 //并在为每个图像路径创建一个新的div的同时，一个一个地插入它

 $('#sliderid').html( data );

            }               
        });
    });
});

【问题讨论】：

您的 AJAX 调用结果data，这是您发布的 PHP 代码生成的表吗？
不，这些基本上是表格中的图像路径

标签： php jquery ajax

【解决方案1】：

<script type="text/javascript">
$(document).ready(function() {
    $('ul.sub_menu a').click(function() {
        var txt = $(this).text();  
        $.ajax({
            type: 'POST',
            url: 'thegamer.php',
            data: {send_txt: txt},
            success: function( data ){

            var response=JSON.parse(data);

                $.each(response, function(index, item){

                $('#sliderid').append($("<div></div>").text(item));

                });
        }
    });
}); }); </script>

您所要做的就是迭代您收到的数据，并在每次迭代时创建一个 div，其中包含您附加到容器元素的 url。

我还注意到您忘记添加 echo jason_encode(array_of_data_to_be_send) 以将数据发回。（你没有发回任何东西）。

还要确保将其作为数组发送（对于此代码 sn-p）。

【讨论】：

【解决方案2】：

最好使用Jquery Template，很容易解决你的问题。获取 JSON 数据并绑定到您的 jquery 模板。

【讨论】：

+1 但考虑使用 Knockout 而不是 JQ 模板，因为后者已被弃用。虽然我相信 KO 使用 JQ 模板...