核心代码：

  • 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>

效果截图：

Ajax前后端交互——后端接收前端页面变量的更多相关文章

  1. THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据，会因为一个div而失败

    这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...

  2. 前后台交互（打开前端页面，不传递任何数据，发送ajax请求）

    1.打开前端,不传递任何数据 <script src="./jquery.min.js"></script> <script> $(docume ...

  3. bootshiro---开源的后台管理框架--基于springboot2+ shiro+jwt的真正rest api资源无状态认证权限管理框架,开发人员无需关注权限问题,后端开发完api,前端页面配置即可

    https://gitee.com/tomsun28/bootshiro

  4. 一、Django前后端交互之Ajax和跨域问题

    一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...

  5. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  6. 把数据转化为JSON格式用ajax进行前后端交互

    接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...

  7. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  8. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  9. 前端ajax的各种与后端交互的姿势

    前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...

随机推荐

  1. Numpy和原生Python用于数组计算的性能对比

  2. MEVN 架构（MongoDB + Express + Vue + NODEJS）搭建

    一个完整的网站服务架构包括:1.web frame ---这里应用express框架2.web server ---这里应用nodejs3.Database ---这里应用monggoDB4.前端展示 ...

  3. 人机交互大作业--flash嵌入web（纯界面）

    界面: 源代码:最近较忙,后续会上传至github

  4. 【weex开发】weex官方源码

    公司目前使用版本:weex_sdk:0.10.0 介绍地址:https://bintray.com/alibabaweex/maven/weex_sdk/0.18.0 weex最新版本:weex_sd ...

  5. 【Android开发】监听图库数据库的变化

    步骤一: 保存图片或者删除之前,初始化ContentObserver ScreenshotContentObserver mScreenObserver = new ScreenshotContent ...

  6. mybatis 实现分页和过滤模糊查询

    基于 mybatis 的分页和过滤查询 学习内容: 分页设计 1.分页需传递的参数 2.分页需展示的数据 3.分页需展示的数据的来源 3.1.结果总数与结果集(分页原理) 3.2.总页数.上一页和下一 ...

  7. 递归函数求n!

    #include<iostream> using namespace std; int main() { int n; cin>>n; int jieceng(int); co ...

  8. Python知识结构

    Python知识结构(点我) 欢迎评论提修改意见

  9. Java设计模式——抽象工厂模式

    抽象工厂模式也是创建模式,可以把它理解成创建工厂的工厂,这种模式也是我们经常使用的.在抽象工厂中的接口是用来创建工厂的,每个生成的工厂又都可以按照工厂模式创建其他对象. 举例说明: 创建Shape接口 ...

  10. socket套接字模块及黏包现象

    一.socket套接字模块 socket概念 socket层 理解socket Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模 ...