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

2024-08-20 10:01:14

前后端发送字符串

前端代码

<!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数据交互的资料请关注我们其它相关文章！

Python flask使用ajax上传文件的示例代码

目录前言 JS Form的enctype属性 Input MIME类型(更多直接百度,类型超乎你的想想) 上传单个文件 html代码部分 javascript代码部分 flask 视图函数部分上传多个文件 html js 出问题解决方案前言 JS 为什么要用ajax来提交在使用from提交时,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名. 为安全起见,即file-upload 元素不允许 HTML 作者或 JavaScript 程序员指定一个默认的文件名.HTML value
Python Flask前后端Ajax交互的方法示例

之前总结过flask里的基础知识,现在来总结下flask里的前后端数据交互的知识,这里用的是Ajax 一. post方法 1.post方法的位置:在前端HTML里,绑定在一个按钮的点击函数里,或者一个鼠标输入框点击离开事件. (1)数据附在URL里(请求路径),发送到后端. /*前端HTML<script>里:*/ $.post("/js_post/"+ip, data_to_backend, function(data){alert("success "
Flask框架之数据交互的实现

目录 1 使用Flask处理表单 1.1 使用Flask处理通用表单 1.2 使用Flask-WTF处理表单 2 使用Flask上传文件 3 Cookie的使用 3.1 Cookie的基本概念 3.2 Cookie的基本使用 4 Session的使用 4.1 Session的基本配置 4.2 Session的基本使用 1 使用Flask处理表单什么是表单(Form)? 表单是搜集用户数据信息的各种表单元素的集合区域.它的作用是实现用户和服务器的数据交互.通过表单搜集客户端输入的数据信息,如何提
Flask框架运用Ajax实现数据交互的示例代码

目录前后端发送字符串前后端发送JSON数据发送数据并携带token 收发JSON格式字符串使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信. 前后端发送字符串前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
Django中使用jquery的ajax进行数据交互的实例代码

jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择最终实现效果如图: 将jquery文件拷贝到static/js/目录下打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo
springboot前后台数据交互的示例代码

本文介绍了springboot前后台数据交互的示例代码,分享给大家,具体如下: 1.在路径中传递数据,比如对某个数据的id:123 前台发送:格式大致如下在路径中传数据后台接收: 后台接收数据后台接收结果 2.查询字符串传递数据前台发送: 前台使用Querystring发送数据后台接收: 这里@RequestParm可以不写,在后台找不到前台对应的字段时,输出null,在@RequestParam中指定的话输出指定的值(前台没给出字段时): 后台接收queryString方式传递的数
php 接口与前端数据交互实现示例代码

最近在做前后端数据交互的尝试,也跳了很多坑,使用的是php+bootstrap-table+js,把一些收获记录在这里,方便查询. 这个小项目,仅有3个文件,分别为: 1.crud.html 2.data.php 3.crud.sql 数据交互实现1:查询 1.mysql 数据库建表 2.php查询接口 3.前端数据展现 mysql 数据库建表数据库名称:crud 第一个表名:t_users 主键:user_id,自增长排列 php: <?php //测试php是否可以拿到数据库中的数据 /*
前端实现滑动按钮AJAX与后端交互的示例代码

目录 html代码 css代码效果图 JS事件触发 flask后端接口参考链接 html代码 <div class="switch-box"> <input id="switchButton" type="checkbox" class="switch" /> <label for="switchButton"></label> </div>
Flask框架运用Ajax实现轮询动态绘图

Ajax是异步JavaScript和XML可用于前后端交互,在之前<Flask 框架:运用Ajax实现数据交互>简单实现了前后端交互,本章将通过Ajax轮询获取后端的数据,前台使用echart绘图库进行图形的生成与展示,后台通过render_template方法返回一串JSON数据集,前台收到后将其应用到绘图库上,实现动态监控内存利用率的这个功能. 首先LyShark先来演示一下前端如何运用AJAX实现交互,通过$.ajax定义ajax开始标志,并指定url,type,datetype等信息,
Django 使用Ajax进行前后台交互的示例讲解

本文要实现的功能是:根据下拉列表的选项将数据库中对应的内容显示在页面,选定要排除的选项后,提交剩余的选项到数据库. 为了方便前后台交互,利用了Ajax的GET和POST方法分别进行数据的获取和提交. 代码如下:  <script> $("#soft_id").change(function(){ var softtype=$("#soft_id").find("option:select
EasyUI框架使用Ajax提交注册信息的实现代码

EasyUI框架使用Ajax提交注册信息的实现代码一.服务器代码: @Controller @Scope("prototype") public class StudentAction extends BaseAction<Student> { private static final long serialVersionUID = -2612140283476148779L; private Logger logger = Logger.getLogger(Stude
JavaScript使用Ajax上传文件的示例代码

本文介绍了JavaScript使用Ajax上传文件的示例代码,分享给大家,具体如下: 实现文件的上传主要有两种方式: 使用form表单提交上传 html代码如下: <form id="uploadForm" enctype="multipart/form-data"> <input id="file" type="file" name="file"/> <button id=&
es+flask搜索小项目实现分页+高亮的示例代码

环境前端:html,css,js,jQuery,bootstrap 后端:flask 搜索引擎:elasticsearch 数据源:某某之家项目展示项目目录主要源码获取数据源并写入es from lxml import etree from concurrent.futures import ThreadPoolExecutor from elasticsearch import Elasticsearch from elasticsearch import helpers impor

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

目录

前后端发送字符串

前后端发送JSON数据

发送数据并携带token

收发JSON格式字符串

相关推荐

随机推荐