Flask AJAX 获取数据

title: Flask AJAX 获取数据版本控制
author: HardyDragon
tags: Flask

为页面添加控制按钮和更新数据按钮

为控件样式使用 foundation

 	<link rel="stylesheet" href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>

<div class="switch round">
   <input id="mySwitch3" type="checkbox">
     <label id="submit_btn" for="mySwitch3"></label> LED switch
 </div>

 <div>
     <!-- <form action="/api/data">
         <button type="submit">Get Json Of Data</button>
     </form> -->
     <form action="/api/data">
         <button type="button" id="updatabtn">Upload JSON Data</button>
     </form>
 </div>

为控件添加点击JS

<!-- 初始化 Foundation JS -->
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })


        $(function () {
            // body...
            $("#mySwitch3").click(function () {
                alert("已打开或关闭LED！");

                // $.ajax({
                //     url: "api/data",
                //     type: "GET",
                //     dataType: "json",
                //     success: function (data) {
                //         // alert(data.name + ":" + data.age);
                //         // $("#NAME2").val(data.name);
                //         // $("#AGE2").val(data.age);
                //         // console.log(data)
                //         alert("已打开或关闭LED！");
                //     }

                // })
            })
        })

        $(function () {
            // body...
            $("#updatabtn").click(function () {
                // alert("获取数据！");

                $.ajax({
                    url: "api/data",
                    type: "GET",
                    dataType: "json",
                    success: function (data) {
                        var tempture = data["tempture"];
                        var humidity = data["humidity"];
                        var time = data["time"];
                        var str = tempture + "   " + humidity + "\rTime: " + time;
                        document.getElementById("tempture").innerHTML = "tempture: " + tempture;
                        document.getElementById("humidity").innerHTML = "humidity: " + humidity;
                        document.getElementById("time").innerHTML = "time: " + time;

                        alert(str);
                        // $("#NAME2").val(data.name);
                        // $("#AGE2").val(data.age);
                        console.log(data)
                        // alert("已打开或关闭LED！");
                    }

                })
            })
        })
    </script>

总结

通过为按钮添加 AJAX 请求获取 api 的数据，并更新对应标签的内容，达到在不刷新整个页面的情况下从服务器获取新的数据的效果。