feat: 优化保存后的页面效果

jeessy2 · Sep 11, 2020 · 239aaa8 · 239aaa8
1 parent 30dce56
commit 239aaa8
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 38 deletions.
diff --git a/static/jquery-3.5.1.min.js b/static/jquery-3.5.1.min.js
diff --git a/static/js_css_data.go b/static/js_css_data.go
diff --git a/static/pages/writing.html b/static/pages/writing.html
@@ -9,6 +9,7 @@
   <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="/static/bootstrap.min.css">
   <link rel="stylesheet" href="/static/common.css">
+  <script src="/static/jquery-3.5.1.min.js"></script>
 </head>
 
 <body>
@@ -30,9 +31,13 @@
   <main role="main" style="margin-top: 15px">
     <div class="row">
       <div class="col-md-6 offset-md-3">
-        <form action="/save" method="post">
+        <form>
 
-          <button type="submit" class="btn btn-primary" style="margin-bottom: 15px;">Save</button>
+          <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
+
+          <div class="alert alert-success" style="display: none;">
+            <strong id="resultMsg">保存成功</strong>
+          </div>
 
           <div class="portlet">
             <h5 class="portlet__head">DNS服务商</h5>
@@ -171,25 +176,45 @@ <h5 class="portlet__head">其它配置</h5>
             </div>
           </div>
 
-          <button type="submit" class="btn btn-primary">Save</button>
+          <button class="btn btn-primary submit_btn" style="margin-bottom: 15px;">Save</button>
 
         </form>
       </div>
       <div class="col-md-3">
-        <p class="font-weight-lighter text-break" style="margin-top: 115px;font-size: 13px;" id="logs"></p>
+        <p class="font-weight-light text-break" style="margin-top: 115px;font-size: 13px;" id="logs"></p>
       </div>
     </div>
   </main>
 
   <script>
-    function getQueryVariable(){
-      var query = window.location.search.substring(1);
-      if (query === "saveOk=true") {
-        window.location.href = "/"
-        alert("保存成功")
-      }
-    }
-    getQueryVariable()
+    $(function(){
+      $(".submit_btn").on('click',function(e) {
+        e.preventDefault();
+        $('body').animate({ scrollTop: 0 }, 300);
+        $.ajax({
+          method: "POST",
+          url: "/save",
+          data: $('form').serialize(),
+          success: function (result) {
+            $('.alert').css("display", "block");
+            if (result !== "ok") {
+              $('.alert').addClass("alert-danger")
+              $('#resultMsg').html(result)
+            } else {
+              // ok
+              setTimeout(function(){
+                $('.alert').css("display", "none");
+              }, 3000)
+            }
+          },
+          error: function(jqXHR) {
+            alert(jqXHR.statusText);
+          }
+        })
+      })
+
+    })
+
     var beforeDnsID=""
 
     function alidnsCheckedFun() {
@@ -243,20 +268,14 @@ <h5 class="portlet__head">其它配置</h5>
     }
   </script>
 
-  <script>
-    function getLogs() {
-      var ajax = new XMLHttpRequest();
-      ajax.open("get","/logs");
-      ajax.send();
-      ajax.onreadystatechange = function () {
-        if (ajax.readyState==4 && ajax.status==200) {
-          document.getElementById("logs").innerHTML = ajax.responseText
-      　}
-      }
-    }
-
-    getLogs()
-    setInterval(getLogs, 5 * 1000)
-  </script>
+<script>
+  function getLogs() {
+    $.get("/logs", function(result){
+      $("#logs").html(result)
+    })
+  }
+  getLogs()
+  setInterval(getLogs, 5 * 1000)
+</script>
 
 </html>