首頁 > 軟體

Flask框架運用Ajax實現資料互動的範例程式碼

2022-11-09 14:01:49

使用Ajax技術網頁應用能夠快速地將增量更新呈現在使用者介面上，而不需要過載重新整理整個頁面，這使得程式能夠更快地迴應使用者的操作，如下筆記將簡單介紹使用AJAX如何實現前後端資料通訊。

前後端傳送字串

前端程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function SendAjax(){
            $.ajax({
                url:"/",
                contentType: "POST",
                data:{"head":"hello lyshark"},
                success:function(data){
                    if(data=="1"){
                        alert("請求已經提交.");
                    }
                },
                error:function(){
                     alert("執行失敗了...")
                }
            });
        }
    </script>
    <form action="/" method="post">
        <input type="button" value="傳送資料" onclick="SendAjax()">
    </form>
</body>
</html>

Flask後端程式碼

from flask import Flask,render_template,request
import json

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route('/', methods=["GET","POST"])
def index():
    if request.method == "POST":
        # 接收資料
        token = request.headers.get("Authorization")
        json_value = request.get_json()
        print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")

        # 傳送資料
        info = dict()
        info["status"] = "success"
        info["page"] = "/test/lyshark"
        return jsonify(info)

    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

前後端傳送JSON資料

前端程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

    <script type="text/javascript">
        function SendAjax()
        {
            var username = $('input[name="username"]').val();
            var password = $('input[name="password"]').val();
            $.ajax({
                url:"/",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                headers: {"Authorization": "1a2cEFgh"},                              <!--此處攜帶token-->
                data: JSON.stringify({"username":username,"password":password}),     <!--此處攜帶JSON-->
                success:function(result)
                {
                    console.log("狀態碼: " + result.status + " 頁面: " + result.page);
                },
                error:function()
                {
                     console.log("執行失敗了");
                }
            });
        }
    </script>

    <!--提交資料-->
    <form action="/" method="post">
        使用者賬號: <input type="text" placeholder="使用者賬號" name="username" /><br><br>
        使用者密碼: <input type="text" placeholder="使用者密碼" name="password" /><br><br>
        <input type="button" value="傳送資料" onclick="SendAjax()">
    </form>
</body>
</html>

Flask後端程式碼

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route('/', methods=["GET","POST"])
def index():
    if request.method == "POST":
        # 接收資料
        token = request.headers.get("Authorization")
        json_value = request.get_json()
        print(f"token = {token} username = {json_value['username']} password = {json_value['password']}")

        # 傳送資料
        info = dict()
        info["status"] = "success"
        info["page"] = "/route/lyshark"
        return jsonify(info)

    else:
        return render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

傳送資料並攜帶token

前端程式碼部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function SendAjax(){
            var token = $('input[name="token"]').val();
            $.ajax({
                url:"./dataFromAjax",
                type: "POST",
                contentType: "application/json;charset=utf-8",
                headers:{"Authorization":token},   <!--此處攜帶token-->
                success:function(result){
                    alert("執行成功...");
                },
                error:function(){
                     alert("執行失敗了...");
                }
            });
        }
    </script>

    <!--提交資料-->
    <form action="/dataFromAjax" method="post">
        設定token: <input type="text" placeholder="使用者賬號" name="token" /><br>
        <input type="button" value="傳送資料" onclick="SendAjax()">
    </form>
</body>
</html>

Flask後臺部分

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dataFromAjax",methods=['POST'])
def recv():
    token = request.headers.get("Authorization")
    print(token)
    return  render_template("index.html")

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

收發JSON格式字串

前端部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <script type="text/javascript">
        function GetAjax(){
            $.ajax({
                url:"/dataFromAjax",
                contentType: "GET",
                success:function(data){
                    alert("姓名: " + data.name + "年齡: " + data.age);
                },
                error:function(){
                    alert("執行失敗了...")
                }
            });
        }
    </script>

    <!--提交資料-->
    <input type="button" class="MyButton" value="接收資料" onclick="GetAjax()">
</body>
</html>

Flask後端部分

from flask import Flask,render_template,request
from flask import jsonify

app = Flask(import_name=__name__,
            static_url_path='/python',   # 設定靜態檔案的存取url字首
            static_folder='static',      # 設定靜態檔案的資料夾
            template_folder='templates') # 設定模板檔案的資料夾

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/dataFromAjax",methods=["GET","POST"])
def set():
    info = dict()
    info['name'] = "lyshark"
    info['age'] = 22
    return jsonify(info)

if __name__ == '__main__':
    app.run(host="127.0.0.1", port=80, debug=False)

以上就是Flask框架運用Ajax實現資料互動的範例程式碼的詳細內容，更多關於Flask Ajax資料互動的資料請關注it145.com其它相關文章！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com