核心代码：

  • 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. 记一次用mpvue框架搭建的小程序

    介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了Vue.js 的 runtime 和 compiler 实 ...

  2. java中异常到底有什么用？举例

    异常的意义:马克-to-win:通过上面的例子,我们看出通过引入异常这种技术,即使出现不测(用户把0赋给除数),也可以让程序不崩溃,还能继续优雅 的运行.那,这种技术有用,值得学.马克-to-win: ...

  3. 142. 环形链表 II

    做题思路 or 感想 : 1,这一题用快慢指针来判断是否有环,快慢指针同一起点,速度不同,如果有环,则必定会相遇 2,第二个有意思的点就是数论环节来弄出环入口了,真的太精妙了,但因为我表述能力不好,这 ...

  4. JavaSSM-总结

    Spring框架技术 SSM(Spring+SpringMVC+Mybatis)阶段的学习,也算是成功出了Java新手村. 前面我们已经学习过Mybatis了. 从这里开始,很多的概念理解起来就稍微有 ...

  5. java过滤器拦截器的执行时机

    https://www.cnblogs.com/shamo89/p/8534580.html https://www.cnblogs.com/juanzila/p/11276067.html

  6. Java学习day31

    同步方法的机制:synchronized,包括synchronized方法和synchronized块 同步方法:public synchronized void method(int args){ ...

  7. BurpSuite下提示embedded browser initialisation failed（嵌入式浏览器初始化失败）的解决方法

    BurpSuite可谓是渗透测试过程经常使用的神器之一,但使用中经常会碰到奇奇怪怪的问题,比如有时抓http包,发送到Repeater(中继器,也叫重发器)模块后,在右边Render模块下,却无法看到 ...

  8. 腾讯云服务器ssh登录老是自动断开链接的解决办法

    vim /etc/ssh/sshd_config 找到下面两行 #ClientAliveInterval 0 #ClientAliveCountMax 3 去掉注释,改成 ClientAliveInt ...

  9. Java语言学习day05--7月2日

    今日内容介绍1.引用类型变量的创建及使用2.流程控制语句之选择语句 ###01创建引用类型变量公式 * A: 创建引用类型变量公式 * a: 我们要学的Scanner类是属于引用数据类型,我们先了解下 ...

  10. git版本时提示openssl ssl_read

    1.右击git bash here 2.执行 git config --global http.sslVerify "false"