Question

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

Here是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函数还是该函数错误？

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

非常感谢您的帮助

Answer 1

在JavaScript和JQuery中都有多种显示方式。

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

点击按钮 查找我的合作伙伴 时，调用函数 GetRandomProfiles（）。这将一次加载1个配置文件，持续单击该按钮将加载另一个配置文件。

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

Answer 2

好吧，您必须完成三个任务，并且可以使用纯JavaScript来完成。

通过HTTP请求从API URL（https://randomuser.me/api/）中获得3个随机用户。
收集数组中的随机用户数据。
使用您拥有的数组中的正确内容打印HTML。

使用纯JavaScript：

您需要创建一个辅助函数来执行异步HTTP请求（AJAX）。对于任何使用JavaScript的Web项目而言，它都可以执行异步HTTP请求而无需任何第三方库（如jQuery），这是一个非常基本的结构。此辅助函数有点类似于jQuery中的$.get()，$.getJSON()，$.ajax()函数。

var newXHR = null;
function sendXHR(type, responseType, url, data, callback) {
  newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
  newXHR.responseType = responseType;
  newXHR.open(type, url, true);
  newXHR.send(data);
  newXHR.onreadystatechange = function() {
    if (this.status === 200 && this.readyState === 4) {
      callback(this.response); // Anonymous function is required at this point: function(argument) { ... }.
    }
  };
}

注意：

您不能对 asynchronous 请求使用for循环语句   因为可以在不确定的时间获得结果，而   for循环的执行是 synchronous 。从这个意义上讲   使用 回调函数 非常有用，它允许   上一次执行时代码继续执行   以 asynchronous 请求的递归函数结尾。

然后：

您可以使用三个参数创建递归函数：url，times，callback。哪里：
- url。这是一个字符串，它是 API URL ：https://randomuser.me/api/。
- times。这是一个数字。在这种情况下为3，因为您需要向 API URL 发送3个HTTP请求。
- callback。这是执行作为参数传递的函数参考。 其值必须是一个函数。此函数引用可以接收一个值作为参数。

count和arrayOfUsers变量必须在全局范围内定义。

function getUsers(url, times, callback) {
  if (count < times) { // Check the limit in the recursive process. You need to execute this function only 3 times to get 3 random users from the API URL.
    sendXHR("GET", "json", url, null, function(response) { // The response parameter contains the data from the API URL, so you can store this value in an array for every request.
      arrayOfUsers.push(response); // Save the random user data from the API in the array.
      count++; // Increment the counter.
      getUsers(url, times, callback); // Keep executing the function to get more random user data.
    });
  } else {
    callback(arrayOfUsers); // Once reaching the limit return the result of arrayOfUsers through the callback function.
  }
}

要存储从HTTP请求获得的随机用户数据，可以使用Array#push：在这种情况下：arrayOfUsers.push(response);。
使用数据构建HTML标记的更实用方法是串联字符串。

在这种情况下，我具有以下功能：

function renderUsers(data) {
  var html = "", len = data.length, user;
  for (var i = 0; i < len; i++) {
    user = data[i];
    html += "<div class=\"user\"><div><label>Name: </label><span title=\"";
    html += "LastName: ";
    html += user.results[0].name.last;
    html += "\">";
    html += user.results[0].name.first;
    html += "</span></div><div><label>Address: </label><span>";
    html += user.results[0].location.street;
    html += " ";
    html += user.results[0].location.city;
    html += " ";
    html += user.results[0].location.state;
    html += "</span></div><div><label>Email: </label><span>";
    html += user.results[0].email;
    html += "</span></div><div><label>Image: </label><span>";
    html += "<img alt=\"";
    html += user.results[0].picture.large;
    html += "\" src=\"";
    html += user.results[0].picture.large;
    html += "\" /></div></div>";
  }
  return html; // Return the built html.
}

您会遇到这样的事情：

(function() {
  // Declaring global variables.
  var newXHR = null, arrayOfUsers = [], count = 0;

  // Helper function to make HTTP requests (AJAX) with JavaScript.
  function sendXHR(type, responseType, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.responseType = responseType;
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() {
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }
  // Recursive function to get random users.
  function getUsers(url, times, callback) {
    if (count < times) { // Check the limit in the recursive process. You need to execute this function only 3 times to get 3 random users from the API URL.
      sendXHR("GET", "json", url, null, function(response) { // The response parameter contains the data from the API URL, so you can store this value in an array for every request.
        arrayOfUsers.push(response); // Save the random user data from the API in the array.
        count++; // Increment the counter.
        getUsers(url, times, callback); // Keep executing the function to get more random user data.
      });
    } else {
      callback(arrayOfUsers); // Once reaching the limit return the result of arrayOfUsers through the callback function.
    }
  }
  // Function to render in the page with the random users.
  function renderUsers(data) {
    var html = "", len = data.length, user;
    for (var i = 0; i < len; i++) {
      user = data[i];
      html += "<div class=\"user\"><div><label>Name: </label><span title=\"";
      html += "LastName: ";
      html += user.results[0].name.last;
      html += "\">";
      html += user.results[0].name.first;
      html += "</span></div><div><label>Address: </label><span>";
      html += user.results[0].location.street;
      html += " ";
      html += user.results[0].location.city;
      html += " ";
      html += user.results[0].location.state;
      html += "</span></div><div><label>Email: </label><span>";
      html += user.results[0].email;
      html += "</span></div><div><label>Image: </label><span>";
      html += "<img alt=\"";
      html += user.results[0].picture.large;
      html += "\" src=\"";
      html += user.results[0].picture.large;
      html += "\" /></div></div>";
    }
    return html; // Return the built html.
  }

  var btnFindMyPartners = document.getElementById("btnFindMyPartners");
  btnFindMyPartners.onclick = function() {
    var users = document.getElementById("users");
    users.removeAttribute("hidden");
    users.textContent = "Loading...";
    arrayOfUsers = []; // Reset array of users.
    count = 0;
    getUsers("https://randomuser.me/api/", 3, function(data) {
      document.getElementById("users").innerHTML = renderUsers(data);
    });
  };
}());

body {
  font-family: "Segoe UI", sans-serif;
  font-size: 0.8em;
}

button {
  border: #819bc2 solid 1px;
  cursor: pointer;
}

#users,
#users .user,
#users .user div,
button {
  border-radius: 5px;
  margin: 5px;
  padding: 5px;
}

#users {
  border: #819bc2 solid 1px;
}

#users .user {
  background-image: linear-gradient(to left, #cfcee6, #fff);
  border: #46628c solid 1px;
  box-shadow: inset #92979c 0 0px 20px 0px;
}

#users .user div {
  border: #d4dbe7 solid 1px;
}

<button id="btnFindMyPartners">Find my partners</button>
<div id="users" hidden>
</div>

当您动态构建HTML标记时，我想提醒您以下内容。

HTML5 - The id attribute：

id属性指定其元素的唯一标识符（ID）。的值必须在元素的主子树中的所有ID中唯一并且必须至少包含一个字符。该值不能包含任何空格字符。

希望这会有所帮助。

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

2 个答案: