隐藏页面特效

Ajax前后端交互——后端接收前端页面变量

核心代码：

  • app.py
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)


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

#接受前台消息
@app.route('/receive_message', methods=['GET'])
def send_message():
    global message_get    #定义全局对象（全局变量）
    message_get = ""      #初始化全局对象

    message_get = request.args['message']   #接受前台变量
    print("收到前端页面变量值：",message_get)
    # print("收到前端发过来的信息：%s" % message_get)
    return "数据传递成功！"


if __name__ == '__main__':
    app.run()
  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <label for="send_content">向后台发送消息：</label>
    <input id="send_content" type="text" name="send_content">
    <input id="send" type="button" value="发送">
</div>

<script src="/static/js/jquery-3.6.0.min.js"></script>

<!-- 发送 -->
<script type="text/javascript">
    $("#send").click(function () {
        var message = $("#send_content").val()
        $.ajax({
            url:"http://127.0.0.1:5000/receive_message",
            type:"GET",
            data:{
                message:message
            },
            success:function (data) {
                alert(data)
            },
            error:function () {
                alert("接收失败")
            }
        })
    })
</script>

</body>
</html>

效果截图：

 

 


__EOF__

本文作者：CherriesOvO
本文链接：https://www.cnblogs.com/zyj3955/p/15568262.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！
posted @   CherriesOvO  阅读(309)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！
点击右上角即可分享
微信分享提示