add htmldemo

4 years ago · 660e343582
parent 353fcb7365
commit 660e343582
3 changed files with 59 additions and 13 deletions
--- a/static/js/index.js
+++ b/static/js/index.js
@ -1,5 +1,12 @@
+
+$(document).ready(function () {
+    $("#demo").click(function (e) {
+        e.preventDefault();
+        //alert("hello world");
+        begin();
+    });
    function begin() {
-    var xhr = new XMLHttpRequest();
+        /*var xhr = new XMLHttpRequest();
        xhr.open('get', '/begin?begin=1');
        xhr.onload = function () {
            var response = xhr.responseText;
@ -7,5 +14,31 @@ function begin(){
            var json_data = eval('(' + response + ')');
            console.log(json_data);
        }
-    xhr.send(null);
+        xhr.send(null);*/
+        $.ajax({
+            type: "get",
+            url: "/begin",
+            data: "begin=1",
+            success: function (res) {
+                switch (res.option) {
+                    case "+":
+                        $("#ul").append("<li>" + res.number_1 + " + " + res.number_2 + " = " + (res.number_1 + res.number_2) + "</li>");
+                        break;
+                    case "-":
+                        $("#ul").append("<li>" + res.number_1 + " - " + res.number_2 + " = " + (res.number_1 - res.number_2) + "</li>");
+                        break;
+                    case "/":
+                        $("#ul").append("<li>" + res.number_1 + " / " + res.number_2 + " = " + (res.number_1 / res.number_2) + "</li>");
+                        break;
+                    case "*":
+                        $("#ul").append("<li>" + res.number_1 + " * " + res.number_2 + " = " + (res.number_1 * res.number_2) + "</li>");
+                        break;
+
+                    default:
+                        break;
                }
+                alert(response.number_1 + response.option + response.number_2);
+            }
+        });
+    }
+});
--- a/static/js/jquery-3.6.0.min.js
+++ b/static/js/jquery-3.6.0.min.js
--- a/templates/index.html
+++ b/templates/index.html
@ -1,11 +1,22 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
-    <script src="/static/js/index.js" type="text/javascript"></script>
-    <title>四则运算</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <script src="/static/js/jquery-3.6.0.min.js"></script>
+    <script src="/static/js/index.js"></script>
 </head>
+
 <body>
-    <button type="submit" onclick="begin();">开始</button>
+    <button id="demo">demo</button>
+    <div class="display">
+        <ul id="ul">
+        </ul>
+    </div>
+    <input type="text">
 </body>
+
 </html>