Start implementing AJAX

Problem with cross origin requests, need to do more research.
8 years ago · f52e88f83a
2 changed files with 55 additions and 1 deletions
--- a/spotifyvis/static/spotifyvis/scripts/index.js
+++ b/spotifyvis/static/spotifyvis/scripts/index.js
@ -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();
+});
+
--- a/spotifyvis/templates/spotifyvis/index.html
+++ b/spotifyvis/templates/spotifyvis/index.html
@ -1,4 +1,5 @@
 <!DOCTYPE html>
+{% load static %}
 <html>
  <head>
    <title>User Login</title>
@ -11,14 +12,25 @@
        width: 500px;
      }
    </style>
+
  </head>

  <body>
    <div class="container">
      <div id="login">
        <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>
+
+
+    <script src="{% static 'spotifyvis/scripts/index.js' %}"></script>
  </body>
 </html>