zoukankan      html  css  js  c++  java
  • 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>

    效果截图:

  • 相关阅读:
    jacascript 数组
    jacascript 基础数据类型(一)
    JS checkbox 全选 全不选
    sql 循环处理表数据中当前行和上一行中某值相+/-
    C# 围棋盘的画法
    C 中读取键盘码
    C# string.format、string.connect和+=运算 效率计算
    Sqlserver 中exists 和 in
    urldecode解码方法
    SQL server 临时表
  • 原文地址:https://www.cnblogs.com/zyj3955/p/15568262.html
Copyright © 2011-2022 走看看