时间戳

首页 > 解决方案 > 从 JQuery 返回 3 个随机配置文件的函数？

javascript - 从 JQuery 返回 3 个随机配置文件的函数？

问题描述

我想创建一个网络应用程序，该应用程序返回 3 个随机学生个人资料，一旦您单击按钮，这些个人资料就会随机分配给您。我正在寻找可以做到这一点的联合国功能，但我找不到任何东西。你有什么可以做这项工作的吗？

如果需要，这里是 Github 存储库。

我已经尝试过function(randomusers)但我失败了

$.getJSON("https://randomuser.me/api/", function (randomusers) {
    var user = randomusers.results[0];
    document.getElementById("prenom").textContent = (user.name.first); //prénom
    document.getElementById("adresse").textContent = (user.location.street + " " + user.location.city + " " + user.location.state); // adresse
    document.getElementById("email").textContent = (user.email); //email
    var img = document.createElement('IMG'); //profile picture
    img.setAttribute('src', user.picture.large);
    document.getElementById("photo").appendChild(img);
}

当我单击“查找我的合作伙伴”按钮时，我希望出现 3 个随机用户配置文件。不幸的是，我无法显示这 3 个配置文件和任何记录。是我没有将按钮链接到JS函数还是函数错误？

我是编码新手，我有点过于雄心勃勃，所以我现在不知道该怎么做。

非常感谢你的帮助

标签： javascriptjqueryhtmljson

解决方案

有多种方法可以在 JavaScript 和 JQuery 中显示它。

您可以在此 git 存储库 https://github.com/helloritesh000/DisplayRandom3Profile中找到工作代码示例

点击按钮Find My Partners调用函数GetRandomProfiles()。这将一次加载一个配置文件，继续单击它将加载另一个配置文件的按钮。

<script type="text/javascript">
    function GetRandomProfiles()
    {
        $.getJSON( "https://randomuser.me/api/", function( randomusers ) {
            var user = randomusers.results[0];
            // document.getElementById("picturegenerator").innerHTML = "";

            var img = document.createElement('IMG');
            img.setAttribute('src', user.picture.large);
            document.getElementById("picturegenerator").appendChild(img);

            var detail = document.createElement('div');
            detail.innerHTML = "";

            var prenom = document.createElement('div');
            prenom.setAttribute('id', 'prenom');
            prenom.innerHTML = user.name.first;
            detail.innerHTML += prenom.outerHTML;

            var adresse = document.createElement('div');
            adresse.setAttribute('id', 'adresse');
            adresse.innerHTML = user.location.street +" "+ user.location.city + " " + user.location.state;
            detail.innerHTML += adresse.outerHTML;

            var email = document.createElement('div');
            email.setAttribute('id', 'email');
            email.innerHTML = user.email;
            detail.innerHTML += email.outerHTML;

            document.getElementById("picturegenerator").appendChild(detail);
            } ); 
    }
</script>

另一种实现方法是在运行 3 次的 for 循环中添加服务器调用。它将通过单击按钮拉出 3 个配置文件。

<script type="text/javascript">
    function GetRandomProfiles()
    {
        for(i=0; i<3;i++)
        {
            $.getJSON( "https://randomuser.me/api/", function( randomusers ) {
            var user = randomusers.results[0];
            // document.getElementById("picturegenerator").innerHTML = "";

            var img = document.createElement('IMG');
            img.setAttribute('src', user.picture.large);
            document.getElementById("picturegenerator").appendChild(img);

            var detail = document.createElement('div');
            detail.innerHTML = "";

            var prenom = document.createElement('div');
            prenom.setAttribute('id', 'prenom');
            prenom.innerHTML = user.name.first;
            detail.innerHTML += prenom.outerHTML;

            var adresse = document.createElement('div');
            adresse.setAttribute('id', 'adresse');
            adresse.innerHTML = user.location.street +" "+ user.location.city + " " + user.location.state;
            detail.innerHTML += adresse.outerHTML;

            var email = document.createElement('div');
            email.setAttribute('id', 'email');
            email.innerHTML = user.email;
            detail.innerHTML += email.outerHTML;

            document.getElementById("picturegenerator").appendChild(detail);
            } );
        }
    }
</script>

推荐阅读