使用ajax完成python flask前端与后台数据的交互

最新推荐文章于 2024-06-27 12:56:37 发布
最新推荐文章于 2024-06-27 12:56:37 发布
阅读量1.3w 收藏 47
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/omodao1/article/details/83049960
版权

python端：

from flask import Flask, render_template
import json
import os

app = Flask(__name__)

testInfo = {}


@app.route('/test_post/nn', methods=['GET', 'POST'])  # 路由
def test_post():
    testInfo['name'] = 'xiaoliao'
    testInfo['age'] = '28'
    return json.dumps(testInfo)


@app.route('/')
def hello_world():
    return 'Hello World!'


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


if __name__=="__main__":
    app.run()

JS端：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>echarts</title>
</head>
 
<body>
    <p>数据展示：
        <input type="text" id ="NAME">
        <input type="text" id ="AGE"></p> 
    <p>
        <button id = "btn">点击获取</button>
        <input type="text" id ="NAME2">
        <input type="text" id ="AGE2"></p> 
    
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script>
        $.ajax({
        url: "test_post/nn",
        type: "POST",
        dataType: "json",
        success: function (data) {
            // alert(data.name + ":" + data.age);
            $("#NAME").val(data.name);
            $("#AGE").val(data.age);
            console.log(data)}

        })
	</script>
    

    <script>
        $(function() {
            // body...
            $("#btn").click(function(){
                $.ajax({
                url: "test_post/nn",
                type: "POST",
                dataType: "json",
                success: function (data) {
                // alert(data.name + ":" + data.age);
                $("#NAME2").val(data.name);
                $("#AGE2").val(data.age);
                console.log(data)}

                })
            })
        })
    </script>

</body>
 
</html>

参考链接：

https://www.cnblogs.com/showersun/p/3745355.html

https://blog.csdn.net/we1583004we/article/details/81512893

http://www.w3school.com.cn/jquery/ajax_post.asp

LoveWeeknd
关注
  • 3
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
chatgpt赋能python：Python前端与后端的数据交互
findyi123的博客
06-03 947
本文由chatgpt生成，文章没有在chatgpt生成的基础上进行任何的修改。以上只是chatgpt能力的冰山一角。作为通用的Aigc大模型，只是展现它原本的实力。对于颠覆工作方式的ChatGPT，应该选择拥抱而不是抗拒，未来属于“会用”AI的人。🧡AI职场汇报智能办公文案写作效率提升教程 🧡专注于AI+职场+办公方向。下图是课程的整体大纲下图是AI职场汇报智能办公文案写作效率提升教程中用到的ai工具。
python 前后端交互-Python Django 前后端数据交互 之 后端向前端发送数据
weixin_39517400的博客
11-10 1481
Django 从后台往前台传递数据时有多种方法可以实现。最简单的后台是这样的：from django.shortcuts import renderdefmain_page(request):return render(request, "index.html")这个就是返回index.html的内容，但是如果要带一些数据一起传给前台的话，该怎么办呢？一 view -> HTM...
python实现通过flask和前端进行数据收发
09-18
今天小编就为大家分享一篇python实现通过flask和前端进行数据收发，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
从0到1，Web框架 Flask 全网最全教学！全文1w字，蓝图、会话、日志、部署等使用 Flask 搭建中小型企业级项目
最新发布
xt350488的博客
06-27 990
Flask是一个用Python编写的轻量级Web应用框架，以其简洁和灵活性而著称，非常适合开发小型至中型的Web应用。Flask是一个功能强大且灵活的Web框架，通过其丰富的扩展和简洁的语法，能够快速开发出从简单到复杂的Web应用。其轻量级的特性和对开发者友好的设计，使得Flask成为Python Web开发中的一个受欢迎的选择。从 0 到 1，Flask 全网最全教学！蓝图、会话、日志、部署等使用 Flask 搭建中小型企业级项目。
python实现一个简单的接口与前端交互
大小都是愁的成长之路
06-22 1万+
python实现一个简单的接口与前端交互
python-flask前端后端之间的数据通信
suke_notes
03-04 2332
通过表单发送： 前台： 采用javascript编写前端的活动代码。 <form method="post" action="login"> Name：<input type="text" name="name"/> PassWord:<input type="password" name="password"/> <input ...
python前端与后端的数据交互_前端与后端的数据交互（jquery ajax+python flask）
weixin_39780255的博客
11-29 617
前端与后端的数据交互，最常用的就是GET、POST，比较常用的用法是：提交表单数据到后端，后端返回json前端的数据发送与接收1）提交表单数据2）提交JSON数据后端的数据接收与响应1）接收GET请求数据2）接收POST请求数据3）响应请求前端的数据发送与接收1. 提交表单数据# GET请求var data = {"name": "test","age": 1};$.ajax({type: 'GE...
Python Flask前后端Ajax交互的方法示例
09-20
Python的Flask框架提供了一种轻量级的方式来构建Web应用，而Ajax（Asynchronous JavaScript and XML）则允许我们在不刷新整个页面的情况下与服务器进行数据交换。本文将详细介绍如何在Flask中使用Ajax实现前后端交互...
jQuery实现Ajax功能分析【与Flask后台交互】
10-16
主要介绍了jQuery实现Ajax功能,结合实例形式分析了jQuery ajax功能实现方法以及与Flask后台进行交互的相关操作技巧,需要的朋友可以参考下
这个项目是基于python的flask框架，将后台自然语言算法处理的数据通过web前端以动态图展示出来的一个web交互系统
04-15
综上所述，这个项目融合了Python的Flask框架、自然语言处理、数据可视化以及前端技术，构建了一个能够处理自然语言数据并以动态图表形式展示的Web交互系统。开发者通过Flask的灵活架构实现后端逻辑，利用NLP算法处理...
python中不能使用索引运算的是_Python笔记
weixin_39922374的博客
12-03 2239
1.在Python中数的类型有三种——整数、浮点数和复数。其中整数类型又分为int(有符号整数)、long(长整数)和bool(布尔值)。复数的例子：(-5+4j)。在Python中不用区分’longint’类型，长整数范围仅受限于用户计算机的虚拟内存总数。2.没有仅仅使用ASCII的字符串，原因是Unicode是ASCII的超集。如果要严格使用ASCII编码的字节流，可用str.encode(...
python后端数据发送到前端_python如何模拟前端通过JSON.stringify给后端发送数据
weixin_39801158的博客
12-04 1360
在后端有一个函数为defbefore_score(request):ifrequest.is_ajax():print(request.body)temp=json.loads(request.body.decode('utf-8'))request.session['score_stunum']=str(temp['s...在后端有一个函数为def before_score(request):i...
python-flask之ajax从前端传递数据到后台
weixin_43201090的博客
02-19 1452
一、get方法 $.get('/changecart_mount', {'mount':mount,'cartid':cartid,'totalprice':totalprice}, function (data,status) { console.log(data.code,status); ...
flask---》flask与ajax交互
python_web全栈
11-01 1881
【代码】flask---》flask与ajax交互。
Python前后端交互（ Flask & Ajax ）
热门推荐
m0_57193008的博客
04-17 1万+
Python前后端交互（ Flask & Ajax ）
flask+表单+ajax
weixin_42755384的博客
07-09 664
要注意这个request是来源于flask的，不是来源于urllib from flask import Flask, render_template,request app=Flask(__name__) @app.route('/') def index(): html =''' <!DOCTYPE html> <html lang="en"&g...
flask中使用ajax 处理前端请求 弹框展示
weixin_30878361的博客
05-23 1543
菜小鱼初次使用 ajax，想前端提交数据，后端处理后，将结果以弹框的形式展示，在网上查看了好多，不停的调试，终于调通了 html： <html> <head></head> <body> <form class="formXXX1" method="post"> <br class="formXXX2" /&...
Flask中ajax的使用
m0_63302973的博客
11-11 1879
ajax初步学习
python+html语音人物交互_flask后台与前端（html）交互的两种方法
06-02
好的，针对您的问题，我可以提供以下两种方法： 1. 使用AJAX请求 可以在前端（html）中使用JavaScript发起AJAX请求，向后台（Flask）发送请求并获取响应。具体实现方式如下： 前端（html）代码： ```html <button onclick="sendMsg()">发送</button> <div id="response"></div> <script> function sendMsg() { var msg = document.getElementById("msg").value; var xhr = new XMLHttpRequest(); xhr.open("POST", "/api", true); xhr.setRequestHeader("Content-type", "application/json"); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById("response").innerHTML = xhr.responseText; } }; xhr.send(JSON.stringify({"msg": msg})); } </script> ``` 后台（Flask）代码： ```python from flask import Flask, request app = Flask(__name__) @app.route('/api', methods=['POST']) def api(): data = request.json msg = data.get('msg') # 获取前端传来的消息 # 处理消息并返回响应 return "Hello, " + msg if __name__ == '__main__': app.run() ``` 2. 使用WebSocket WebSocket是一种在单个TCP连接上进行全双工通信的协议。使用WebSocket可以实现实时的双向通信。具体实现方式如下： 前端（html）代码： ```html <button onclick="sendMsg()">发送</button> <div id="response"></div> <script> var socket = new WebSocket("ws://localhost:5000/ws"); socket.onmessage = function(event) { document.getElementById("response").innerHTML = event.data; }; function sendMsg() { var msg = document.getElementById("msg").value; socket.send(msg); } </script> ``` 后台（Flask）代码： ```python from flask import Flask, request from flask_sockets import Sockets app = Flask(__name__) sockets = Sockets(app) @sockets.route('/ws') def ws(ws): while not ws.closed: msg = ws.receive() # 获取前端传来的消息 # 处理消息并返回响应 ws.send("Hello, " + msg) if __name__ == '__main__': from gevent import pywsgi from geventwebsocket.handler import WebSocketHandler server = pywsgi.WSGIServer(('localhost', 5000), app, handler_class=WebSocketHandler) server.serve_forever() ``` 以上就是两种使用Flask后台与前端（html）交互的方法。您可以根据具体需求选择合适的方式进行实现。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LoveWeeknd

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值