核心代码：

  • 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. [转载] Link prefetch

    本来想翻译的但是有人翻译了,还是转过来吧.原文<HTML5 Link Prefetching>,译文<使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载 ...

  2. JavaScript中函数节流的理解

    函数节流的原理 函数节流,就是对会频繁触发的函数事件做一些限制,让这些函数可以在每隔一定的时间或者每次满足一定的条件下再触发.一般我们会给他起一个名字throttle.也就是节流的意思.一般这样的函数 ...

  3. H5扇形

    使用H5 canvas绘制的可交互扇形 requestAnimationFrame() 现有动画实现方式的不足 setTimeout和setInterval都不十分精确.为它们传入的第二个参数,实际上 ...

  4. 【论文简读】 Deep web data extraction based on visual

    <Deep web data extraction based on visual information processing>作者 J Liu 上海海事大学 2017 AIHC会议登载 ...

  5. python-排列组合序列

    [题目描述]用户输入整数n(1<=n<=26)和整数m(m<=n),然后输入n个不同的字母,请编写程序输出在这n个字母中选择m个字母的所有排列序列和组合序列. [练习要求]请给出源代 ...

  6. hive启动出错

    Hive启动报错:java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkArgument - 狗子的进阶史 - ...

  7. java中接口interface有什么用呢？举例！

    接口只有方法的定义,没有方法的任何实现.那这有什么意义呢?马克-to-win: 接口就像一个服务合同.接口只关心必须得干什么而不关心如何去实现它.有 意义吗?有意义.马克-to-win:比如我们的软件 ...

  8. npm权限不够(安装什么都报错)

    问题 Windows下使用npm安装任何包都报错, Windows下使用npm显示权限不够 如图: 解决方法    1. 方法一    使用管理员权限打开 命令窗口,  治标不治本!!!!不推荐    ...

  9. 微信小程序插件组件-Taro UI

    微信小程序组件使用以下官网查看 ↓  ↓  ↓ https://taro-ui.jd.com/#/docs/fab

  10. JDK7u21反序列链学习

    JDK7u21 1.前置知识 jdk7u21是一条不依赖CommonsCollections库依赖的,看利用链所有知识其实跟CommonsCollections也有重复,我们来学习一下以前没学过的类或 ...