Как получить подробную информацию о пользователе, нажав на идентификатор пользователя, используя JS Ajax? - PullRequest
Новая
       5

Как получить подробную информацию о пользователе, нажав на идентификатор пользователя, используя JS Ajax?

0 голосов
/ 21 апреля 2020

Как узнать детали пользователя, нажав на идентификатор пользователя? Я получил данные из JSON API. Но знаю, что мне нужно больше функциональности, чтобы я мог сделать идентификатор в качестве ссылки, когда пользователь нажимает на эту ссылку, только этот идентификатор данных будет отображаться из JSON API SERVER. Мне интересно, как это произойдет с помощью JS AJAX .Пожалуйста, помогите.

Вот мой код. 


<html>

<body>


      <table class = "src">
         <tr><th>Name</th><th>id</th></tr>
         <tr><td><div id = "Name"></div></td>
         <td><div id = "Id"></div></td></tr>
      </table>



   </body>


<script type="text/javascript">
   var xmlhttp = new XMLHttpRequest();
var url = "https://jsonplaceholder.typicode.com/users";

   xmlhttp.onreadystatechange = function() {

               if (this.readyState == 4 && this.status == 200)  {
                  // Javascript function JSON.parse to parse JSON data
                  var jsonObj = JSON.parse(this.responseText);

                  // jsonObj variable now contains the data structure and can
                  // be accessed as jsonObj.name and jsonObj.country.
                    var name="";
                    var id="";

                   for(var i = 0; i < 10; i++) {
          name += '<a href="">' + jsonObj[i].name + '</a> <br>';
          id+=jsonObj[i].id + '<br>' ;

                  }
        document.getElementById("Name").innerHTML = name;
        document.getElementById("Id").innerHTML = id;
               }
               }



             xmlhttp.open("GET", url, true);
            xmlhttp.send();
</script>
</html>

1 Ответ

1 голос
/ 21 апреля 2020

Нацельтесь на id div и добавьте к ним прослушиватель кликов. Внутренний обработчик получает идентификатор с помощью e.target.innerText 

  document.querySelectorAll("#tab div.userid").forEach(elem => elem.addEventListener("click", function(e) {
        let xmlhttp = new XMLHttpRequest();
        let url = `https://jsonplaceholder.typicode.com/users/${ e.target.innerText}`;
        xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
                user = JSON.parse(this.responseText);
                //handle your user data here      
        })
       xmlhttp.open("GET", url, true);
       xmlhttp.send();
    }

Следующий пример находит пользователей в массиве и отображает его данные. Здесь не делается никаких запросов, поскольку данные уже доступны в массиве. 

var users = [];

function getUsers() {
  let xmlhttp = new XMLHttpRequest();
  let url = "https://jsonplaceholder.typicode.com/users";
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      users = JSON.parse(this.responseText);
      let tableString = ` <tr> <th > Name </th> <th > id </th> </tr>`
      users.forEach(obj => {
        tableString += ` <tr>
      <td>
        <div class="name">${obj.name}</div>
      </td>
      <td>
        <div class="userid">${obj.id}</div>
      </td>
    </tr>`
      });
      document.getElementById("tab").innerHTML = tableString;
     document.querySelectorAll("#tab div.userid").forEach(elem => elem.addEventListener("click", function(e) {
        getDataOfUser(e.target.innerText)
     }))
    }
  }
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}

function getDataOfUser(id) {
  let user = users.find(useR => useR.id == id);
  document.querySelector(".info-user").innerHTML = `Info of user:
Name:${user.name}<br>
Email:${user.email}<br>
Phone:${user.phone}<br>
Website:${user.website}<br>
`
}
getUsers();
#tab td{
   border:1px solid black
   }
.userid{
 cursor:pointer;
}
Click on id to get the user data
<table id="tab">
<table>
<div class="info-user">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...