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>
效果截图：
Ajax前后端交互——后端接收前端页面变量的更多相关文章
- THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据，会因为一个div而失败
这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...
- 前后台交互（打开前端页面，不传递任何数据，发送ajax请求）
1.打开前端,不传递任何数据 <script src="./jquery.min.js"></script> <script> $(docume ...
- bootshiro---开源的后台管理框架--基于springboot2+ shiro+jwt的真正rest api资源无状态认证权限管理框架,开发人员无需关注权限问题,后端开发完api,前端页面配置即可
https://gitee.com/tomsun28/bootshiro
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
- ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 前端ajax的各种与后端交互的姿势
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...
随机推荐
- poj_3253_priority queue
描述 农夫约翰想要修篱墙,他需要N块木板,第i块板长Li.然后他买了一块很长的板子,足够他分成N块.忽略每次锯板子带来的损失. 约翰忘记买锯子了,于是像Don借.Don要收费,每次锯一下,就要收一次板 ...
- webpack+vue-cli+ElementUI+vue-resource 前端开发
线上商城项目(电脑0环境)1.安装node.js (参考http://www.runoob.com/nodejs/nodejs-install-setup.html): 2.安装 webpack (全 ...
- 移动端的vw px rem之间换算
一.vw px rem em是什么 1.vw:就是相对视口宽度(Viewport Width).1vw = 1% * 视口宽度.也就是说,一个视口就是100vw. 2.px:px应该是在css中使用最 ...
- 关于websocket制作聊天室的的一些总结
websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式.参考地址:https://www.jianshu.com/p/00e... 关于自己的看法:websocke ...
- Initialization failed for 'https://start.spring.io
本文精华(没空的小伙伴,直接看精华部分即可) 1.精华1: 开发/下载项目的时候考虑系统必备的版本兼容性 2.精华2: 通过火狐浏览器访问官网的旧版本,下载到任意需要的项目版本,然后通过项目导入ide ...
- x64 番外篇——保护模式相关
写在前面 此系列是本人一个字一个字码出来的,包括示例和实验截图.由于系统内核的复杂性,故可能有错误或者不全面的地方,如有错误,欢迎批评指正,本教程将会长期更新. 如有好的建议,欢迎反馈.码字不易, ...
- java中Super指向他紧邻的父类，而不是最底层的基类
3.2 当有两次继承时,演示super指向他紧邻的父类 我们把上面的例子扩展成两次继承, 就看出:马克-to-win,Super是一个参考(或说指针)指向他紧邻的父类,而不是最底层的基类. 例1.3. ...
- java中单态模式或单例模式(Singleton)有什么意义?
8.单态模式或单例模式(Singleton) 单态模式有什么用呢?想一下Adobe Photoshop ,处理两张图,会启动两个photoshop吗?多耗费内存呀! ( Consider Adobe ...
- java中的排序除了冒泡以来， 再给出一种方法， 举例说明
9.5 排序: 有一种排序的方法,非常好理解,详见本题的步骤,先找出最大值和最小值,把最小值打印出来后,把它存在另一个数组b当中,再删除此最小值,之后再来一次找出最小值,打印出最小值以后,再把它存 ...
- Blazor组件自做四 : 使用JS隔离封装signature_pad签名组件
运行截图 演示地址 响应式演示 感谢szimek写的棒棒的signature_pad.js项目, 来源: https://github.com/szimek/signature_pad 正式开始 1. ...