从AJAX获取多个图像，但每个图像都在图像扩展后显示。

I am passing multiple ids to fetch the image name but each image is displaying after the name of the image. please check below output.

我通过多个id来获取图像名称，但是每个图像都显示在图像名称之后。请检查下面的输出。

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

I need output like this.

我需要这样的输出。

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

What I am trying to achieve. I am creating add to compare section. I have more than 100 users with a check box. If any user selects the check box one by one then it will call the AJAX with an id of the selected user and display the image of the user.

我想要达到的目标。我正在创建add来比较section。我有超过100个用户有一个复选框。如果任何用户逐个选择复选框，那么它将使用所选用户的id调用AJAX并显示用户的映像。

Example: I have selected user id 5 it will call the AJAX and display the image of the user. At the same time If I select user id 10 then it will call the AJAX and display the image name of user 5 as well as 10. Same as If I select use id 100 and Pass to AJAX and display the image name. but it will display the Image 5, 10, 100.

示例:我选择了用户id 5，它将调用AJAX并显示用户的映像。同时，如果我选择user id 10，它将调用AJAX并显示用户5和10的图像名称。与我选择使用id 100并传递给AJAX并显示图像名称一样。但是它会显示图像5,10,100。

So I just want to know what logic should I use it?

我想知道应该用什么逻辑?

compare_process.php

compare_process.php

This will display the image name of selected users

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

$_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

Ajax

It will get the selected id and pass to PHP

它将获得所选的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

HTML

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

2 个解决方案

#1

You should return a JSON array from PHP:

您应该从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();

then loop through the array in Javascript:

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

#2

You could loop over what checkboxes are checked with $('input[type=checkbox]:checked') Loop over those, and send that to the PHP script.

您可以使用$('input[type=checkbox]::勾选')循环检查哪些复选框，并将其发送到PHP脚本。
You could do it per checkbox, and 'append' it with JS to some element. So instead of the .html(<img>) .append(<img>) in the success statement of the ajax call.

您可以在每个复选框中执行，并将它与JS一起附加到某个元素中。因此，在ajax调用的成功语句中，不要使用.html() .append()。

#1