json數據獲取(Ajax)並展示
豆瓣電影json數據 --Ajax獲取並展示到頁面
//1.運用Ajax通用get向https://douban.uieee.com/v2/movie/coming_soon請求數據
//2.處理json數據
//3.將請求到的json數據渲染到頁面
//3.1.HTML5的字符拼接(當要拼接的innerHtml涉及其它操作,最好使用創建dom節點的方式)
效果圖:
JS代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer">
<title>豆瓣推薦電影</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<style>
img {
height: 150px;
width: 120px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-xs-8 col-xs-push-2">
<ul class="list-group" id="list-array">
<h2 id="msg" align="center" style="margin:20px auto">獲取加載JSON可能會有些慢，請耐心等待幾秒...</h2>
</ul>
</div>
</div>
</body>
<script>
//1.運用Ajax通用get向https://douban.uieee.com/v2/movie/coming_soon請求數據
//2.處理json數據
//3.將請求到的json數據渲染到頁面
//3.1.HTML5的字符拼接(當要拼接的innerHtml涉及其它操作,最好使用創建dom節點的方式)
var listArray = document.getElementById("list-array");
var msg = document.getElementById('msg');
//添加頁面電影信息
function renderMovie(data) {
listArray.removeChild(msg);//刪除（並返回）當前節點listArray的指定子節點msg
//data.xx都是獲得json數據里面的屬性值
// 獲取豆瓣api中有效的電影總數據
var subjects = data.subjects;
//獲取每一條電影信息並絢染
for (var i = 0; i < subjects.length; i++) {
//電影海報
var poster = subjects[i].images.small;
var movieName = subjects[i].original_title;
var casts = '主演：';
subjects[i].casts.forEach((value) => {
casts += (value.name + '、');
});
casts=casts.substring(0, casts.length-1);
var genres = '類型：';
subjects[i].genres.forEach((value) => {
genres += (value + ' 、');
});
genres=genres.substring(0, genres.length-1);
var pubdates = '上映時間：' + subjects[i].pubdates[0];
var directors = '導演：';
subjects[i].directors.forEach((value) => {
directors += value.name + '、';
});
directors=directors.substring(0, directors.length-1);
//每個完整數據之間用創造bom節點的方式去拼接
var li = document.createElement("li");
li.className = 'list-group-item';
//拼接電影信息
var movieData =
'<div class="media">\n' +
' <div class="media-left media-middle">\n' +
' <a href="#">\n' +
' <img class="media-object" src="' + poster + '">\n' +
' </a>' +
' </div>\n' +
' <div class="media-body">\n' +
' <h3 class="media-heading">' + movieName + '</h3>\n' +
' <p>' + casts + '</p>\n' +
' <p>' + genres + '</p>\n' +
' <p>' + pubdates + '</p>\n' +
' <p>' + directors + '</p>\n' +
' </div>\n' +
' </div>';
li.innerHTML = movieData;
//添加li節點
listArray.append(li);
}
}
//ajax中get請求通用寫法
function ajax(url, method, renderSome) {
if (!url.trim()) {
return;
}
// 初始化異步請求的對象
var xhr = new XMLHttpRequest();
// 監聽請求過程狀態的變化
xhr.onreadystatechange = function () {
// 服務器端放回了數據，並且數據正確
if (xhr.readyState == 4 && xhr.status == 200) {
// 將字符串轉換為json的數組
var arry = JSON.parse(xhr.responseText);
renderSome(arry);//方法作為參數回調,
// location.href = '三級聯動案例.html'//可以到達下一個界面
}
}
//如果用戶名沒有傳入 method, 默認走GET
if (!method || 'GET' == method.toUpperCase()) {
// 初始化請求
xhr.open('GET', url);
// 發送請求
xhr.send();
}
}
ajax('https://douban.uieee.com/v2/movie/coming_soon', null, renderMovie);//1.想服務器請求數據 2.請求方式 3.請求數據成功后的處理方法
</script>
</html>