javascript - 从 AJAX 获取多张图片，但每张图片都在图片扩展后显示

Question

我正在传递多个 ID 来获取图像名称，但每个图像都显示在图像名称之后。请检查以下输出。

<img src="images/profile/1496108249.jpgavatar.pngavatar.png" alt="">

我需要这样的输出。

<img src="images/profile/1496108249.jp" alt="">
<img src="images/profile/avatar.png" alt="">
<img src="images/profile/avatar.png" alt="">

我正在努力实现的目标。我正在创建添加到比较部分。我有超过 100 个带有复选框的用户。如果任何用户一个一个地选中该复选框，那么它将使用所选用户的 ID 调用 AJAX 并显示该用户的图像。

示例:我选择了用户 ID 5，它将调用 AJAX 并显示用户的图像。同时，如果我选择用户 ID 10，那么它将调用 AJAX 并显示用户 5 和 10 的图像名称。与如果我选择使用 ID 100 并传递给 AJAX 并显示图像名称相同。但它会显示图像 5、10、100。

所以我只想知道我应该使用什么逻辑？

compare_process.php

这将显示所选用户的图像名称

$_SESSION['compare_user']=$_POST['users'];
$sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')';
$compare_query=$conn->query($sql_compare);
if ($compare_query->num_rows > 0) {
    while($userdata12=$compare_query->fetch_assoc()){ 
        $compare_pic=$userdata12['profile_pic'];
        echo $compare_pic;
    }
}

exit();

Ajax

它将获取选定的 id 并传递给 PHP

$(document).ready(function() {
  arr = [];
  $("[type=checkbox]").click(function() {
    arr.push($(this).val());
    $.ajax({
      type: "POST",
      url: "includes/compare_process.php",
      data: 'users=' + arr,
      success: function(msg) {
        $("#pics_name").html("<img src='images/profile/" + msg + "' alt='' />");
      },
      error: function() {
        alert("failure");
      }
    });
  });
});

HTML

<input class="check-hidden" type="checkbox" value="<?php echo $compare_u;?>" name="compare_peer" id="compare_peer" />

Answer 1

您应该从 PHP 返回一个 JSON 数组:

$_SESSION['compare_user']=$_POST['users'];
$sql_compare='SELECT * FROM request WHERE Id IN (' .( is_array( $_SESSION['compare_user'] ) ? implode( ',', $_SESSION['compare_user'] ) : $_SESSION['compare_user'] ).')';
$compare_query=$conn->query($sql_compare);
$compare_pic = array();
if ($compare_query->num_rows > 0) {
    while($userdata12=$compare_query->fetch_assoc()){ 
        $compare_pic[]=$userdata12['profile_pic'];
    }
}
echo json_encode($compare_pic);    
exit();

然后在 Javascript 中循环遍历数组:

$(document).ready(function() {
  arr = [];
  $("[type=checkbox]").click(function() {
    if (this.checked) {
        arr.push($(this).val());
    } else { // Remove value if unchecked
        var index = arr.indexOf($(this).val());
        if (index != -1) {
            arr.splice(index, 1);
        }
    }
    $.ajax({
      type: "POST",
      url: "includes/compare_process.php",
      data: { users: arr },
      dataType: 'json',
      success: function(msg) {
        $("#pics_name").empty();
        $.each(msg, function() {
          $("#pics_name").append("<img src='images/profile/" + this + "' alt='' />");
        });
      },
      error: function() {
        alert("failure");
      }
    });
  });
});