Start implementing AJAX

Problem with cross origin requests, need to do more research.
7 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>