Как получить данные на сайте “А” с сайта “Б”, где инфа хранится в виде json файла?
Читай:
- AJAX (технологии забора данных с сервера на клиент)
- Crossdomain AJAX (что нужно делать для того чтобы с помощью AJAX забирать данные с другого домена). Потому что по умолчанию браузер запрещает отсылать AJAX запросы с сайта A на сайт Б.
- HTTP заголовки. Не надо учить все, а только понять как браузер поймет что с сервер домена A разрешил кроссдоменные запросы на сайт Б.
спасибо! нашёл инфу! с сервером связался, а что-то вывести от туда инфу не могу…
var output = document.getElementById('output');
var ajaxhttp = new XMLHttpRequest();
var url = "https://api.randomuser.me/1.0/?results=50&nat=gb,us&inc=gender,name,location,email,phone,picture";
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);
output.innerHTML = jcontent;
console.log(jcontent);
}
}
ajaxhttp.send(null);
url по адресу хранит инфу о 50 пользователях в виде
{
"gender": "male",
"name": {
"title": "mr",
"first": "ethan",
"last": "mitchell"
},
"location": {
"street": "4091 lakeshore rd",
"city": "springfield",
"state": "north dakota",
"postcode": 79650
},
"email": "ethan.mitchell@example.com",
"phone": "(057)-543-1566",
"picture": {
"large": "https://user.me/api/......../78.jpg",
"medium": "https://user.me/api/......../78.jpg",
"thumbnail": "https://user.me/api/......../78.jpg"
}
}
как выкурить 50 изображений (в смысле не текст в виде ссылки, а именно загруженные по ссылкам изображения), допустим picture.medium и допустим location.city у каждого
Нужно создать DOM узлы с помощью document.createElement
, вставить их в DOM, и или вставить текст в эти узлы, или изменить их свойство src
изображения. Самый простой и небезопасный путь - использовать innerHTML
.
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(location, picSrc) {
var div = document.createElement('div')
div.innerHTML = '<div><span>' + location + '</span><img src="' + picSrc + '" /></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.location.city, userJSON.picture.medium))
})
document.body.appendChild(listWrapper)
}
}
ajaxhttp.send(null);
спасибо, работает)) осталось понять как:D почитаем)
ок, а возможно ли поместить малую инфу в блок мини, а большую инфу в блок макси, и мини выводить сразу, а макси по клику на блок мини?
var userBlocks = document.getElementsByClassName('user-block');
for (var i = 0; i < userBlocks.length; i++) {
userBlocks[i].onclick = function()
{
alert ('hello');
}
}
вот такой вариант при клике на блок мини, выводит только привет, а как картинку и текст запилить не знаю в выод, и связать её с 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);
}
Попапы (окошки, появляющиеся поверх контета) делаются с помощью html разметки, которая позиционируется так чтобы быть поверх контета.
Структурно код, отвечающий обработку клика по фейсу, выглядит так:
function handleClick() {
var popup = showPopup() // Показать попап сразу после клика, с индикатором загрузки внутри
sendAjax(function (ajaxResponse) { // Отправить запрос, и по получению ответа заполнить попап содержимым ответа
fillPopup(ajaxResponse, popup)
})
}