Показать сообщение отдельно
  #1 (permalink)  
Старый 21.02.2017, 16:55
Новичок на форуме
Отправить личное сообщение для la-la land Посмотреть профиль Найти все сообщения от la-la land
 
Регистрация: 21.02.2017
Сообщений: 6

вывод информации в всплывающем окне
Код выводит картинку, пол, имя, фамилию каждого человека из json файла на др сайте через get ajax. Надо сделать при клике на блок с персонажем вывод подробной информации, которая хранится там же, а именно, город штат, картинку побольше. строки 22-28 клик и вывод есть, а связать с инфой ajax запроса не знаю как. наставьте на путь истинный)
window.onload = function() {
	var output = document.body;
	var ajaxhttp = new XMLHttpRequest();
	var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";
	
	function createItem(picSrc, title, first, last) {
		var div = document.createElement('div');
		div.innerHTML = '<div class="user-block"><div class="user-block-img"><img src="' + picSrc + '" /></div><ul class="user-block-list"><li>' + title + '</li><li>' + first + '</li><li>' + last + '</li></ul></div>';
		return div;		
	}
	
	ajaxhttp.open("GET", url, true);
	ajaxhttp.setRequestHeader("content-type", "application/json");
	ajaxhttp.onreadystatechange = function() {
		if (ajaxhttp.readyState == 4 && ajaxhttp.status == 200) {
			var jcontent = JSON.parse(ajaxhttp.responseText);
			var listWrapper = document.createElement('div');			
			jcontent.results.forEach(function (userJSON) {
				listWrapper.appendChild(createItem(userJSON.picture.medium, userJSON.name.title, userJSON.name.first, userJSON.name.last));
			});
			document.body.appendChild(listWrapper);
			var userBlocks = document.getElementsByClassName('user-block');
				for (var i = 0; i < userBlocks.length; i++) {
				userBlocks[i].onclick = function()
				{
				alert ('hello');	
				}
			}
		}
	}
	ajaxhttp.send(null);
}

Последний раз редактировалось la-la land, 21.02.2017 в 17:19.
Ответить с цитированием