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 的数据，并更新对应标签的内容，达到在不刷新整个页面的情况下从服务器获取新的数据的效果。