Javascript 一个从ajax调用中提取具有相同属性名的所有数据的语句_Javascript_Php_Jquery_Json_Ajax

Javascript 一个从ajax调用中提取具有相同属性名的所有数据的语句

javascript php jquery json ajax

Javascript 一个从ajax调用中提取具有相同属性名的所有数据的语句,javascript,php,jquery,json,ajax,Javascript,Php,Jquery,Json,Ajax,我的ajax调用返回以下结果：（有两个图像，图像的数量可能会有所不同） [{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”， {“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”}]请尝试使用以下代码。每个函数 <head>

我的ajax调用返回以下结果：（有两个图像，图像的数量可能会有所不同）

[{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”，
{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”}]

请尝试使用以下代码。每个函数

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var data = '[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"}, {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/2.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/3.png"}]';
        data = jQuery.parseJSON(data);

        $.each(data, function( index, value ) {
            var $img = $('<img class="badge-image" src="'  + data[index].BadgeImage + '"/>'); // create the image
            $('#imagesofBadges').append($img); // append it
        });

        $('#imagesofBadges .badge-image').each(function () {
           alert($(this).attr('src'));
        }); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
    });
</script>
</head>

<div id="imagesofBadges">

</div>


$（文档）.ready（函数（）{
var data='[{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”，{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”，{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image\/2.png”，{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/3.png”}]；
data=jQuery.parseJSON（数据）；
$.each（数据、函数（索引、值）{
var$img=$（''）；//创建映像
$（'#imagesofBadges'）。追加（$img）；//追加它
});
$（'#imagesofBadges.badge image'）。每个（函数（）{
警报（$（this.attr（'src'））；
})；//将获取#imagesofBadges中具有类.badge图像的所有元素。
});

尝试使用以下代码。每个函数

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        var data = '[{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"}, {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/2.png"},{"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/3.png"}]';
        data = jQuery.parseJSON(data);

        $.each(data, function( index, value ) {
            var $img = $('<img class="badge-image" src="'  + data[index].BadgeImage + '"/>'); // create the image
            $('#imagesofBadges').append($img); // append it
        });

        $('#imagesofBadges .badge-image').each(function () {
           alert($(this).attr('src'));
        }); // will fetch all the elements that have the class .badge-image that are inside #imagesofBadges.
    });
</script>
</head>

<div id="imagesofBadges">

</div>


$（文档）.ready（函数（）{
var data='[{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”，{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”，{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image\/2.png”，{“BadgeImage”：”http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/3.png“}]”；
data=jQuery.parseJSON（数据）；
$.each（数据、函数（索引、值）{
var$img=$（''）；//创建映像
$（'#imagesofBadges'）。追加（$img）；//追加它
});
$（'#imagesofBadges.badge image'）。每个（函数（）{
警报（$（this.attr（'src'））；
})；//将获取#imagesofBadges中具有类.badge图像的所有元素。
});
实际上，我不明白你的意思。也许你可以试试这个
var data = [
    {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},
    {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}];
var dom = data.map(function (value) {
    return '<img src="'  + value.BadgeImage + '"/>';
})
$('#imagesofBadges').append(dom.join(''));

var数据=[
{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”，
{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”}]；
var dom=data.map（函数（值）{
返回“”；
})
$（'#imagesofBadges'）.append（dom.join（''）；
实际上，我不明白你的意思。也许你可以试试这个
var data = [
    {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png"},
    {"BadgeImage":"http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png"}];
var dom = data.map(function (value) {
    return '<img src="'  + value.BadgeImage + '"/>';
})
$('#imagesofBadges').append(dom.join(''));

var数据=[
{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/1.png”，
{“BadgeImage”：“http:\/\/localhost:8666\/web1\/profile\/images\/badge image 2\/completionist.png”}]；
var dom=data.map（函数（值）{
返回“”；
})
$（'#imagesofBadges'）.append（dom.join（''）；
试试这个：

$（'#imagesofBadges'）.empty（）；
$.each（数据、函数（索引、值）{
//你的代码
})；
试试这个：

$（'#imagesofBadges'）.empty（）；
$.each（数据、函数（索引、值）{
//你的代码
})
u搞错了。正如我说过的，ajax调用的图像数量可能会有所不同。对不起，我想我没有正确地理解您的要求。我的答案是用于显示（追加）使用脚本在html中动态显示n个图像。数据数组可能包含n个图像。您将从ajax获得数据数组。请查看我问题中的上述代码。我相信您非常接近解决方案。请尝试我的代码。它不会重复数据调用，如数据[0]数据[1]。我已经使用了。each（）函数来迭代数组。你搞错了。正如我说过的，ajax调用的图像数量可能会有所不同。对不起，我想我没有正确地理解你的要求。我的答案是用于显示（追加）使用脚本在html中动态显示n个图像。数据数组可能包含n个图像。您将从ajax获得数据数组。请查看我问题中的上述代码。我相信您非常接近解决方案。请尝试我的代码。它不会重复数据调用，如数据[0]数据[1]。我已经使用了。each（）函数来迭代数组。