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");
      }
    });
  });
});

Answer 2

您可以循环检查使用$('input[type=checkbox]:checked')循环选中的复选框，然后将其发送到PHP脚本。
您可以按复选框执行此操作，并使用JS将其“附加”到某个元素。因此，而不是ajax调用的成功语句中的.html(<img>) .append(<img>)。

从AJAX获取多个图像，但每个图像在图像扩展名

2 个答案: