Python编程
搜索
分类

Flask框架运用Ajax实现数据交互的示例代码

作者：lyshark 时间：2023-11-19 19:15:19　

使用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)

来源：https://www.cnblogs.com/LyShark/p/15670635.html

标签：Flask,Ajax,数据,交互
0
投稿

猜你喜欢

  • 解决Win10系统安装MySQL8.0遇到的问题

    2024-01-19 12:55:27

  • 简单的淡入淡出图片轮换效果

    2009-05-22 18:38:00

  • Python集中化管理平台Ansible介绍与YAML简介

    2023-09-23 12:52:34

  • MySQL的DML语言操作实例

    2024-01-15 01:48:43

  • vuex页面刷新数据丢失问题的四种解决方式

    2024-04-09 10:58:50

  • Select count(*)、Count(1)和Count(列)的区别及执行方式

    2024-01-28 14:43:04

  • 用css3-tranistions实现平滑过渡

    2009-12-23 19:24:00

  • 十个Golang开发中应该避免的错误总结

    2024-04-25 15:05:14

  • 简单谈谈Python的pycurl模块

    2023-07-14 01:42:03

  • Python退出时强制运行一段代码的实现方法

    2021-02-07 08:04:16

  • python Copula 实现绘制散点模型

    2023-07-24 14:02:37

  • Python实现socket非阻塞通讯功能示例

    2022-05-16 03:18:25

  • 详解Golang利用反射reflect动态调用方法

    2024-05-02 16:23:47

  • go语言程序cpu过高问题排查的方法详解

    2024-05-08 10:22:09

  • python自动化测试selenium核心技术三种等待方式详解

    2023-09-16 09:06:04

  • 浅谈validator自定义验证及易错点

    2024-05-02 16:58:41

  • python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法

    2023-07-07 02:41:30

  • Asp无组件生成缩略图

    2007-10-26 12:08:00

  • 监测站点使用多少session和application的asp程序

    2007-09-12 19:40:00

  • python+Matplotlib 绘制带置信区间的折线图

    2022-04-29 06:23:40
    • asp之家 网络编程 m.aspxhome.com