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

本文介绍了从AJAX获取多个图像，但每个图像扩展后都会显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 我传递了多个ID来获取图像名称，但每个图像都显示在图像的名称之后。请检查以下输出。 < img src =images / profile / 1496108249.jpgavatar.pngavatar.pngalt = > 我需要这样的输出。 < img src =images / profile / 1496108249.jpalt => < img src =images / profile / avatar.pngalt => < img src =images / profile / avatar.pngalt => 我正在努力实现的目标。我正在创建添加比较部分。我有超过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']; $ _ $ b $ 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（）{$ b $点击（函数（）{ arr.push（$（this）.val（））; $（[type = checkbox]） .ajax（{ type：POST， url：includes / compare_process.php， data：'users ='+ arr， success：function（msg ）{ $（＃pics_name）。html（< img src ='images / profile /+ msg +'alt =''/>）; }，错误：function（）{ alert（failure）; } }）; }）; }）; HTML < input class =check-hiddentype =checkboxvalue =<？php echo $ compare_u;？> name =compare_peerid =compare_peer/> 解决方案你应该从PHP返回一个JSON数组： p> $ _ SESSION ['compare_user'] = $ _ POST ['users']; $ _ $ b $ 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 {//取消选中的值 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）; } }）; }）; }）; 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.<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.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.So I just want to know what logic should I use it? compare_process.phpThis 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();AjaxIt will get the selected id and pass to 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" /> 解决方案 You should return a JSON array from 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);$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:$(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"); } }); });}); 这篇关于从AJAX获取多个图像，但每个图像扩展后都会显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！