使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载刷新整个页面,这使得程序能够更快地回应用户的操作,如下笔记将简单介绍使用AJAX如何实现前后端数据通信。

前后端发送字符串

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SendAjax(){
$.ajax({
url:"/",
contentType: "POST",
data:{"head":"hello lyshark"},
success:function(data){
if(data=="1"){
alert("请求已经提交.");
}
},
error:function(){
alert("执行失败了...")
}
});
}
</script>
<form action="/" method="post">
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>

Flask后端代码

from flask import Flask,render_template,request
import json app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹 @app.route('/', methods=["GET","POST"])
def index():
if request.method == "POST":
# 接收数据
token = request.headers.get("Authorization")
json_value = request.get_json()
print(f"token = {token} username = {json_value['username']} password = {json_value['password']}") # 发送数据
info = dict()
info["status"] = "success"
info["page"] = "/test/lyshark"
return jsonify(info) else:
return render_template("index.html") if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)

前后端发送JSON数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body> <script type="text/javascript">
function SendAjax()
{
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
$.ajax({
url:"/",
type: "POST",
contentType: "application/json;charset=utf-8",
dataType: "json",
headers: {"Authorization": "1a2cEFgh"}, <!--此处携带token-->
data: JSON.stringify({"username":username,"password":password}), <!--此处携带JSON-->
success:function(result)
{
console.log("状态码: " + result.status + " 页面: " + result.page);
},
error:function()
{
console.log("执行失败了");
}
});
}
</script> <!--提交数据-->
<form action="/" method="post">
用户账号: <input type="text" placeholder="用户账号" name="username" /><br><br>
用户密码: <input type="text" placeholder="用户密码" name="password" /><br><br>
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>

Flask后端代码

from flask import Flask,render_template,request
from flask import jsonify app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹 @app.route('/', methods=["GET","POST"])
def index():
if request.method == "POST":
# 接收数据
token = request.headers.get("Authorization")
json_value = request.get_json()
print(f"token = {token} username = {json_value['username']} password = {json_value['password']}") # 发送数据
info = dict()
info["status"] = "success"
info["page"] = "/route/lyshark"
return jsonify(info) else:
return render_template("index.html") if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)

发送数据并携带token

前端代码部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function SendAjax(){
var token = $('input[name="token"]').val();
$.ajax({
url:"./dataFromAjax",
type: "POST",
contentType: "application/json;charset=utf-8",
headers:{"Authorization":token}, <!--此处携带token-->
success:function(result){
alert("执行成功...");
},
error:function(){
alert("执行失败了...");
}
});
}
</script> <!--提交数据-->
<form action="/dataFromAjax" method="post">
设置token: <input type="text" placeholder="用户账号" name="token" /><br>
<input type="button" value="发送数据" onclick="SendAjax()">
</form>
</body>
</html>

Flask后台部分

from flask import Flask,render_template,request
from flask import jsonify app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹 @app.route("/")
def index():
return render_template("index.html") @app.route("/dataFromAjax",methods=['POST'])
def recv():
token = request.headers.get("Authorization")
print(token)
return render_template("index.html") if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)

收发JSON格式字符串

前端部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="https://cdn.lyshark.com/javascript/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
function GetAjax(){
$.ajax({
url:"/dataFromAjax",
contentType: "GET",
success:function(data){
alert("姓名: " + data.name + "年龄: " + data.age);
},
error:function(){
alert("执行失败了...")
}
});
}
</script> <!--提交数据-->
<input type="button" class="MyButton" value="接收数据" onclick="GetAjax()">
</body>
</html>

Flask后端部分

from flask import Flask,render_template,request
from flask import jsonify app = Flask(import_name=__name__,
static_url_path='/python', # 配置静态文件的访问url前缀
static_folder='static', # 配置静态文件的文件夹
template_folder='templates') # 配置模板文件的文件夹 @app.route("/")
def index():
return render_template("index.html") @app.route("/dataFromAjax",methods=["GET","POST"])
def set():
info = dict()
info['name'] = "lyshark"
info['age'] = 22
return jsonify(info) if __name__ == '__main__':
app.run(host="127.0.0.1", port=80, debug=False)

Flask 框架:运用Ajax实现数据交互的更多相关文章

  1. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  2. $Django ajax简介 ajax简单数据交互,上传文件(form-data格式数据),Json数据格式交互

    一.ajax  1 什么是ajax:异步的JavaScript和xml,跟后台交互,都用json  2 ajax干啥用的?前后端做数据交互:  3 之前学的跟后台做交互的方式:   -第一种:在浏览器 ...

  3. flask+sqlite3+echarts3+ajax 异步数据加载

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  4. 基于ssh框架的highcharts前后台数据交互实例

    Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网站和非商业用途使用.HighCh ...

  5. AJAX进行数据交互的过程

    AJAX全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML). 是指一种创建交互式网页应用的网页开发技术. 通过在后台与服务 ...

  6. laytpl模板——怎么使用ajax与数据交互

    第一次在项目中用laytpl模板,下面是一些使用过程中的探索,希望对小伙伴们有所帮助. 注:第一次使用这个模板的小伙伴建议先去看看官网 laytpl <script type="tex ...

  7. springmvc使用ajax进行数据交互时,session失效问题(@ResponseBody与session能否同时使用?)

    今天做博客demo的时候遇到了这样的问题:当我用ajax进行资源请求时,需要顺便将账户信息存入session.但是后来发现有@Responsebody标签时,直接用HttpSession存数据时,根本 ...

  8. Vue--- Vue(Pubsub + Ajax) 数据交互

    案例知识点 兄弟组件儿的通信     使用了Pubsub    订阅与发布 ajax数据请求    获取前   获取中   获取后   获取为空    获取异常 获取成功后显示数据给到  原先定义号的 ...

  9. flask框架下读取mysql数据 转换成json格式API

    研究了一天 因为需要从数据库拿数据然后转换成json的格式 expose出去为 API 发现一条数据是容易,两条以上我居然搞了这么久 好歹出来了 先贴一下 后面更新 mysql的操作 比较容易了htt ...

  10. Python的Flask框架使用Redis做数据缓存的配置方法

    flask配置redis 首先得下载flask的缓存插件Flask-Cache,使用pip下载. sudo pip install flask_cache 为应用扩展flask_cache   app ...

随机推荐

  1. ORM执行SQL 双下划线查询 ORM外键字段创建 外键字段相关操作 ORM跨表查询 跨表查询进阶操作

    目录 ORM执行SQL语句 方式1:使用pymysql模块 方式2:使用raw方法 方式3:django connection 双下划线查询 __gt(>) __lt(<) queryse ...

  2. WCF 动态调用 动态代理

    关键词:WCF动态调用.动态调用WCF.WCF使用动态代理精简代码架构.使用反射执行WCF接口 代码地址: https://gitee.com/s0611163/DynamicWCF https:// ...

  3. L2-016 愿天下有情人都是失散多年的兄妹 (25分) (简单递归判断)

    L2-016 愿天下有情人都是失散多年的兄妹 (25分) 呵呵.大家都知道五服以内不得通婚,即两个人最近的共同祖先如果在五代以内(即本人.父母.祖父母.曾祖父母.高祖父母)则不可通婚.本题就请你帮助一 ...

  4. SpringCloud学习 系列五、创建生产者和消费者验证微服务中心 Eureka的作用

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  5. ECS模式

    大家好,本文提出了ECS模式.ECS模式是游戏引擎中常用的模式,通常用来组织游戏场景.本文出自我写的开源书<3D编程模式>,该书的更多内容请详见:Github 在线阅读 普通英雄和超级英雄 ...

  6. [Vue] Computed property "XXX" was assigned to but it has no setter.

    阅读这篇文章:https://blog.csdn.net/weixin_34090562/article/details/91369638 全选,通过计算属性计算得来.结果报错Computed pro ...

  7. spring--JDK动态代理的实现原理

    JDK 动态代理的实现原理涉及到 Java 的反射机制.它允许在运行时动态创建一个代理类,这个代理类实现了一组接口,并将所有方法调用转发到一个 InvocationHandler 实例.下面是 JDK ...

  8. 怎样实现WPF Prism Module的国际化和本地化?

    怎样实现WPF Prism Module的国际化和本地化? English | 简体中文 上一篇有简单介绍主工程的国际化,使用的资源字典(XAML)实现的. 这几天我添加了几个Prism模块(Modu ...

  9. Vue2 - 配置跨域

    在根目录下创建 vue.config.js 文件 . 即可 vue.config.js : // vue.config.js 配置说明 //官方vue.config.js 参考文档 https://c ...

  10. 【面试题精讲】说一说springboot加载配置文件优先级

    有的时候博客内容会有变动,首发博客是最新的,其他博客地址可能会未同步,认准https://blog.zysicyj.top 首发博客地址 文章更新计划 系列文章地址 Spring Boot 加载配置文 ...