Use AJAX requests with the cookie.

xirc · xirc · commit 28216ab35936 · 2020-09-28T20:52:01.000+09:00
diff --git a/app.py b/app.py
@@ -1,25 +1,26 @@
-from flask import Flask, make_response, request
+from flask import Flask, make_response, request, render_template, jsonify
 
 app = Flask(__name__)
 
 
 @app.route('/', methods=["GET"])
 def index():
-    response = make_response("Here, take some cookie!")
-    response.set_cookie(key="id", value="3db4adj3d", path="/about/")
-    return response
+    return render_template("index.html")
 
 
-@app.route("/about/", methods=["GET"])
-def about():
-    print(request.cookies)
-    return "Hello world!"
+@app.route("/get-cookie/", methods=["GET"])
+def get_cookie():
+    response = make_response("Here, take some cookie!")
+    response.set_cookie(key="id", value="3db4adj3d")
+    return response
 
 
-@app.route("/contact/", methods=["GET"])
-def contact():
-    print(request.cookies)
-    return "Hello world!"
+@app.route("/api/cities/", methods=["GET"])
+def cities():
+    if request.cookies["id"] == "3db4adj3d":
+        cities = [{"name": "Rome", "id": 1}, {"name": "Siena", "id": 2}]
+        return jsonify(cities)
+    return jsonify(msg="Ops!")
 
 
 if __name__ == '__main__':
diff --git a/static/index.js b/static/index.js
@@ -0,0 +1,21 @@
+const button = document.getElementsByTagName("button")[0];
+
+button.addEventListener("click", function() {
+  getACookie().then(() => getData());
+});
+
+function getACookie() {
+  return fetch("/get-cookie/").then(response => {
+    // make sure to check response.ok in the real world!
+    return Promise.resolve("All good, fetch the data");
+  });
+}
+
+function getData() {
+  fetch("/api/cities/")
+    .then(response => {
+      // make sure to check response.ok in the real world!
+      return response.json();
+    })
+    .then(json => console.log(json));
+}
diff --git a/templates/index.html b/templates/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<button>FETCH</button>
+</body>
+<script src="{{ url_for('static', filename='index.js') }}"></script>
+</html>
