核心代码:

  • 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. 让弹幕给 PPD 生个孩子

    怎样才能跑起来我写的弹幕程序 资源下载 申请野狗后端云账号注册 创建应用: 复制appId到index.html的 var ref = new Wilddog("https://<ap ...

  2. mpvue小程序加载不出图片 Failed to load local image resource

    我的GitHub博客,很多内容可以看,喜欢的给星星哦 https://github.com/liangfengbo/frontend 第一道:图片引入本地静态文件失效? mpvue开发小程序时候,要添 ...

  3. MySQL优化篇系列文章(二)——MyISAM表锁与InnoDB锁问题

    我可以和面试官多聊几句吗?只是想... MySQL优化篇系列文章(基于MySQL8.0测试验证),上部分:优化SQL语句.数据库对象,MyISAM表锁和InnoDB锁问题. 面试官:咦,小伙子,又来啦 ...

  4. linux安装mongodb磁盘空间不足

    Insufficient free space for journal filesPlease make at least 3379MB available in /export/servers/mo ...

  5. Python窗口学习之监听窗口变化触发函数

    在窗口大小发生变化后,往往组件也需要调整 代码: #空间适应屏幕 def window_resiz(self,event=None): print(window.winfo_height()) pri ...

  6. ps让图片背景透明

    效果图:  jpg=>png,背景透明 步骤: 1.选择橡皮工具的第三个  魔术橡皮 保存为png,    按住Ctrl+alt+shift+s    保存:

  7. SpringMVC获取请求参数-POJO类型参数

    1.Controller中的业务方法的POJO参数的属性名与请求参数一致,参数值会自动映射匹配 1.创建POJO类 public class User { private String usernam ...

  8. SpringMVC的数据响应方式

    1.页面跳转 *直接返回字符串 *通过ModelAndView对象返回 2.回写数据 *直接返回字符串 *返回对象或集合

  9. spring程序开发步骤

    1.使用spring框架之前的开发步骤 2.使用spring之后的开发步骤 3.文字描述 1.导入Spring开发的基本依赖 2.编写Dao接口和实现类 3.创建spring核心配置文件 4.在spr ...

  10. 五分钟搭建博客系统 OK?

    前言: 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 概要: 通过 Docker Compose 在使用Docker容器构建的隔离环境中轻松运行 WordPress.在开始之前,请确保已安 ...