Question

这是我第一次与$.ajax requests合作，我目前正在建立一个员工目录，该目录应该会像这样随机分配12个人：

我动态创建了12张画廊卡，$ gallery Markup代表每张卡

var $galleryMarkUp = $('<div class="card"> </div>');
  var $cardIMGContainer = $('<div class="card-img-container"> </div>');
  var $cardInfoContainer = $('<div class="card-info-container"> </div>');

  //Append $cardIMGContainer and $cardInfoContainer inside $galleryMarkUp
  $galleryMarkUp.append($cardIMGContainer, $cardInfoContainer);

  //I append an img src inside $cardIMGContainer
  $cardIMGContainer.prepend('<img class="card-img" src="https://placehold.it/90x90" alt="profile picture">');

  //I also need to append an h3 and a couple of paragraphs inside $cardInfoContainer
  $cardInfoContainer.prepend('<h3 id="name" class="card-name cap">first last</h3>',
  '<p class="card-text">email</p>', '<p class="card-text cap">city, state</p>');

//Append $galleryMarkUp inside <div id="gallery" class="gallery">
 $('#gallery').append($galleryMarkUp);

/ *我使用循环将它们克隆了12次 * /

for (let index = 0; index <11; index++) {
   $galleryMarkUp.clone().insertAfter($galleryMarkUp)

以下是我对URL进行的ajax请求：“ https://randomuser.me/api/?nat=us&results=12&”

$.ajax({
url: 'https://randomuser.me/api/?nat=us&results=12&',
dataType: 'json',
success: function(data) {
  console.log(data); //this should log the data for 12 employees in JSON format

  var employeeInfo = data.results //creating a reference to data.results

  $.each(employeeInfo, function(index, employee) {
    //create variable references for Name, email, city,state, etc
    var name = employee.name.first + " " + employee.name.last;
    var email = employee.email;
    var picture = employee.picture.large;
    var location = employee.location.city;
    var number = employee.phone;
    var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
    var birthday =  employee.dob.date;

    //SHOW CONTENT FOR SMALL GALLERY CARDS

    //attach images to employee gallery 
    $('.card-img').attr('src', picture);

    //Get to display the name, I used a code snippet from https://stackoverflow.com/a/11468183/10043628 by user jagm
    $('.card-info-container > :first-child').text(name);

    //Get to display email
    $('.card-text').text(email);

    //Get to display city and state 
    $('.card-info-container > :nth-child(3)').text(location);



    //SHOW CONTENT FOR MODAL BOXES

    //display name
    $('.modal > :nth-child(2)').text(name);

    //attach images to employee modals
    $('.modal-img').attr('src', picture);

    //Display email
   $('.modal > :nth-child(3)').text(email);

   //Display city
    $('.modal > :nth-child(4)').text(location);

    //Display number
    $('.modal > :nth-child(6)').text(number);

    //Display address
    $('.modal > :nth-child(7)').text(fullStreet);

    //Display Birthday
    $('.modal > :nth-child(8)').text(birthday);  
  }); 
} 
});

所以我的问题是，如何在不复制每个细节的情况下添加更多员工卡？我目前可以得到这个：

也供参考，这是我的项目https://github.com/SpaceXar20/FSJS-techdegree-project-5的仓库，我在app.js的第119行有ajax请求，有人可以帮忙吗？

Answer 1

您可以像这样添加您的卡片模板：

$.ajax({
    url: 'https://randomuser.me/api/?nat=us&results=12&',
    dataType: 'json',
    success: function (data) {
        console.log(data); //this should log the data for 12 employees in JSON format

        var employeeInfo = data.results //creating a reference to data.results
        var _cardTemplate = '';
        $.each(employeeInfo, function (index, employee) {
            //create variable references for Name, email, city,state, etc
            var name = employee.name.first + " " + employee.name.last;
            var email = employee.email;
            var picture = employee.picture.large;
            var location = employee.location.city;
            var number = employee.phone;
            var fullStreet = employee.location.street + " " + location + " " + employee.location.postcode;
            var birthday = employee.dob.date;

            //SHOW CONTENT FOR SMALL GALLERY CARDS


            _cardTemplate += '<div class="card">';
            _cardTemplate += '<div class="card-img-container">';
            _cardTemplate += '<img class="card-img" src= "' + picture + '" alt="profile picture"></div>';
            _cardTemplate += '<div class="card-info-container"><h3 id="name" class="card-name cap">' + name + '</h3>';
            _cardTemplate += '<p class="card-text">' + email + '</p><p class="card-text cap">' + location + '</p>';
            _cardTemplate += '</div></div>';

            //SHOW CONTENT FOR MODAL BOXES

            //display name
            $('.modal > :nth-child(2)').text(name);

            //attach images to employee modals
            $('.modal-img').attr('src', picture);

            //Display email
            $('.modal > :nth-child(3)').text(email);

            //Display city
            $('.modal > :nth-child(4)').text(location);

            //Display number
            $('.modal > :nth-child(6)').text(number);

            //Display address
            $('.modal > :nth-child(7)').text(fullStreet);

            //Display Birthday
            $('.modal > :nth-child(8)').text(birthday);



        });

        $('#gallery').append(_cardTemplate); //Append Finally all cards with employee details
    }

})

Answer 2

您好，尝试以下脚本

演示链接：https://output.jsbin.com/wijaniwaxo

您可以查看以上演示的查看源

$(document).ready(function ()
        {
            var html;
            $.ajax({
                method: 'get',
                dataType: 'json',
                url: "https://randomuser.me/api/?nat=us&results=12",
                beforeSend: function ()
                {
                    $('.gallery').html('<h1 class="text-center">Please wait content loading...</h1>');
                },
                success: function (response)
                {
                    html = '';
                    if (response.results)
                    {
                        $.each(response.results, function (index, value)
                        {
                            html += '<div class="col-md-4 custom-col">';
                            html += '<img src="' + value.picture.medium + '" alt="Image ' + index + '" style="width: 100px;" />';
                            html += '<p>' + value.name.first + ' ' + value.name.last + '</p>';
                            html += '<p>' + value.email + '</p>';
                            html += '<p>' + value.location.city + '</p>';
                            html += '</div>';
                        });

                        $('.gallery').html(html);
                    }
                },
                complete: function (response){}
            });
        });

在ajax请求上需要帮助

2 个答案: