flask-demo/sample.html at main · tsuresh/flask-demo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Webpage</h1>
    <p>This is a basic HTML webpage.</p>
    <button onclick="buttonClicked();">Click Me</button>
    <button onclick="fetchData();">Fetch Data</button>
    <div id="usersList"></div>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      function fetchData() {
        let config = {
          method: "get",
          maxBodyLength: Infinity,
          url: "http://127.0.0.1:5000/users",
          headers: {},
        };

        axios
          .request(config)
          .then((response) => {
            console.log(JSON.stringify(response.data));
            var users = response.data;
            for(var user of users){
                var userElement = document.createElement("div");
                userElement.innerHTML = user.name + " - " + user.email;
                document.getElementById("usersList").appendChild(userElement);
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }

      function buttonClicked() {
        let data = JSON.stringify({
          name: "Suresh",
          email: "suresh@test.com",
        });

        let config = {
          method: "post",
          maxBodyLength: Infinity,
          url: "http://127.0.0.1:5000/user",
          headers: {
            "Content-Type": "application/json",
          },
          data: data,
        };

        axios
          .request(config)
          .then((response) => {
            var message = response.data.message;
            alert(message);
          })
          .catch((error) => {
            console.log(error);
          });
      }
    </script>
  </body>
</html>