ajax的get和post请求 -- 基于flask 简单示例
需求:在浏览器端输入姓名,将数据发送给后端,后端将内容追加到 user.json 中,并将该文件中的数据,返回到浏览器打印
1、浏览器端(html文件)
index.html文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="user">
<input type="text" name="user">
<input type="button" value="提交">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script>
/* get请求
$.ajax({
url:'http://localhost:8800/course',
type:'get',
dataType:'json',
success:function (data) {
console.log(data);
// console.log(data);
// var a = JSON.parse(data);
// console.log(a);
// var str_pretty1 = JSON.stringify(a);
// console.log(str_pretty1)
},
error:function () {
}
})
*/
// post请求
$('input[type=button]').click(function () {
$.ajax({
url: "http://127.0.0.1:8800/create",
type: 'post',
data: {
name: $('input[type=text]').val()
},
success: function (data) {
console.log(data);
}
})
})
</script>
</body>
</html>
2、server端(py文件)
使用之前需要下载模块:flask pip3 install flask
#! /usr/bin/env python
# -*- coding: utf-8 -*-
# Date: 2018/6/5
import json
# 导入模块
from flask import Flask
from flask import request
from flask import Response
#创建实例化请求对象
app = Flask(__name__)
# 定义路由
@app.route("/")
# 路由对应的函数处理
def index():
# 响应数据
resp = Response("<h2>首页</h2>")
# 允许所有跨域访问
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp
@app.route("/course")
def courses():
# 业务逻辑
# 返回json序列化的数据
resp = Response(json.dumps({
"name": 'alex'
}))
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp
# 前端发送post请求
# 定义路由
@app.route("/create", methods=["post", ])
def create():
print(request.form.get('name'))
# 读取user.json中的原始的数据
with open("user.json", "r") as f:
# 将数据反序列化
data = json.loads(f.read())
# 将新数据添加到原始的数据中
data.append({"name": request.form.get('name')})
# 将此时最新的数据再次写入文件中
with open("user.json", "w") as f:
f.write(json.dumps(data))
# 再次返回最新的数据 响应会前端
resp = Response(json.dumps(data))
resp.headers["Access-Control-Allow-Origin"] = "*"
return resp
if __name__ == '__main__':
app.run(host="localhost", port=8800, )
3、服务端中存放的user.json
数据以后会存放在数据库中,现在暂时放在文件中
[{"name": "\u5f20\u4e09"}, {"name": "alex"}, {"name": "alex1"}, {"name": "alex12"}, {"name": "alex123"}]
ajax的get和post请求 -- 基于flask 简单示例的更多相关文章
- flask 简单示例
flask import flask from flask import jsonify from flask import request # 要获取到请求参数的话,就要导入这个模块 ''' 创建接 ...
- 使AJAX可缓存——基于flask
主流浏览器都有缓存机制,主要基于HTTP协议定义的缓存策略.对于一定时间内不发生变动的文档缓存起来,对于下次请求,就可以直接返回缓存的结果.使用缓存有以下好处: 1.减少冗余的数据传输,节省网络流量成 ...
- ajax请求基于restFul的WebApi(post、get、delete、put)
近日逛招聘软件,看到部分企业都要求会编写.请求restFul的webapi.正巧这段时间较为清闲,于是乎打开vs准备开撸. 1.何为restFul? restFul是符合rest架构风格的网络API接 ...
- C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件(Form Controls) C#串口通信程序
C#中缓存的使用 缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可: <%@ Outp ...
- Django框架 之 基于Ajax中csrf跨站请求伪造
Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({ data: {csrfmiddlewaretoken: ...
- 基于flask的网页聊天室(三)
基于flask的网页聊天室(三) 前言 继续上一次的内容,今天完成了csrf防御的添加,用户头像的存储以及用户的登录状态 具体内容 首先是添加csrf的防御,为整个app添加防御: from flas ...
- Python flask 基于 Flask 提供 RESTful Web 服务
转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...
- 基于flask+gunicorn+nginx来部署web App
基于flask+gunicorn&&nginx来部署web App WSGI协议 Web框架致力于如何生成HTML代码,而Web服务器用于处理和响应HTTP请求.Web框架和Web服务 ...
- [转]python实现RESTful服务(基于flask)
python实现RESTful服务(基于flask) 原文: https://www.jianshu.com/p/6ac1cab17929 前言 上一篇文章讲到如何用java实现RESTful服务, ...
随机推荐
- vue组件,通过props父组件给子组件传值,WTF, 子组件报错undefined???
如果是正常操作,找了半天又找不到为什么undefined, 那很可能是props的命名出了问题: 不要用小驼峰式命名 例如这种childrenData 这种形式就会报错undefined 请尽量用全 ...
- 1、在Centos上安装Grafana
1.如果你想将老版本的Grafana升级为新版本的Grafana,可以阅读链接中的文档指南: http://docs.grafana.org/installation/upgrading/ 2.使用y ...
- pta总结2
7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成"贰万叁仟壹百零捌"元.为了简 ...
- HDFS及其各组件的机制
一.HDFS运行机制 概述:用户的文件会被切块后存储在多台datanode节点中,并且每个文件在整个集群中存放多个副本,副本的数量可以通过修改配置自己设定. HDFS:Hadoop Distribut ...
- [tensorflow]图像处理相关模块的安装(python3中PIL)
直接上过程图(平台为Anaconda): 默认已经配置完了tensorflow的3.5的环境 我这里已经安装完成 接下来,就可以在python文件中引入模块了 from PIL import Imag ...
- Python中os与sys两模块的区别
<os和sys的官方解释> ➤os os: This module provides a portable way of using operating system dependent ...
- python一个命令开启http服务器
1.例如想共享文件在 E:python文件 打开cmd cd E: cd python文件 #进入要分享的文件夹 2.执行py脚本文件 python -m http.server 3.访问 本机i ...
- javascript事件之调整大小(resize)事件
当浏览器窗口被调整到一个新的高度或宽度时,就会触发resize事件. var EventUtil = { addHandler: function (element, type, handler) { ...
- [Doc]MongoDB用户创建与启用access-control
文档链接:https://docs.mongodb.com/manual/tutorial/enable-authentication/ Pre 个人总感觉数据库的文档结构不太友好, 不太解决问题.以 ...
- 今天圆满了----tensorflow安装日志
Ubuntu的安装 不能用easyBCD,因为新电脑是UEFI启动模式,制作了Ubuntu的系统盘,强烈建议只分swap区(2G)和根目录/区,之前因为/home区不够导致重装 建议使用官方安装文档, ...