Kevin-Mok/spotify-lib-vis
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Start implementing AJAX

Browse Source 
Problem with cross origin requests, need to do more research.
This commit is contained in:
Chris Shyi
2018-06-03 16:04:26 -04:00
parent a508337363
commit f52e88f83a
2 changed files with 55 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
spotifyvis/static/spotifyvis/scripts/index.js Normal file
View File

@@ -0,0 +1,42 @@
document.getElementById("login-btn").addEventListener("click", function() {
let httpRequest = new XMLHttpRequest();
/*
* Handler for the response
*/
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
// hide the login button
document.getElementById('login').setAttribute("display", "none");
let responseData = JSON.parse(httpRequest.responseText);
let dataList = document.getElementById("data-list");
for (let key in responseData) {
let newLi = document.createElement("li");
let innerList = document.createElement("ul");
let dataLabel = document.createElement("li");
dataLabel.innerText = key;
let dataValue = document.createElement("li");
dataValue.innerText = responseData[key];
innerList.appendChild(dataLabel);
innerList.appendChild(dataValue);
newLi.appendChild(innerList);
dataList.appendChild(newLi);
}
} else {
alert("There was a problem with the login request, please try again!");
}
}
}
httpRequest.open('GET', '/login', true);
httpRequest.send();
});

14
spotifyvis/templates/spotifyvis/index.html
View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
{% load static %}
<html> <html>
<head> <head>
<title>User Login</title> <title>User Login</title>
@@ -11,14 +12,25 @@
width: 500px; width: 500px;
} }
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div id="login"> <div id="login">
<h1>This is an example of the Authorization Code flow</h1> <h1>This is an example of the Authorization Code flow</h1>
<a href="/login" class="btn btn-primary">Log in with Spotify</a> <a href="/login" class="btn btn-primary">Log In (Original)</a>
<button id="login-btn">Log In</button>
</div>
<div id="data-container">
<ul id="data-list">
</ul>
</div> </div>
</div> </div>
<script src="{% static 'spotifyvis/scripts/index.js' %}"></script>
</body> </body>
</html> </html>