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服务, ...
随机推荐
- for/while循环运用(do while)
//for循环用于知道次数的循环,while用于不知道的次数的循环//第1种写法 while循环 import java.util.Scanner;//插入util工具包 public class H ...
- vue app混合开发蓝牙串口连接(报错java.io.IOException: read failed, socket might closed or timeout, read ret: -1;at android.bluetooth.BluetoothSocket.connect at js/BluetoothTool.js:329)
我使用的uni-app <template> <view class="bluetooth"> <!-- 发送数据 --> <view c ...
- Java_String&StringBuilder&StringBuffer类
目录 一.String类 二."==" 和 "equals"的区别 三.StringBuffer和StringBuilder 一.String类 String为 ...
- php html生成页面二维码
这个方法主要是针对html页面生成二维码,因此需要一个配置文件phpqrcode.php(因内容太多所以请大家去百度网盘自己下载即可,链接: https://pan.baidu.com/s/1_2mA ...
- Gradle 使用笔记
Springboot2.0 多模块打包问题 打包命令由gradle build 变成 gradle bootJar 或 gradle bootWar buildscript { repositorie ...
- Python实现简单的HttpServer
要写一个类似tomcat的简易服务器,首先需弄清楚这几点: 1. 客户端(Client)和服务端(Server)的角色及作用 角色A向角色B请求数据,这时可以把A视为客户端,B视为服务端.客户端的主要 ...
- phonegap走起
最近phonegap已发布4.0的了..速度提升了不少,很给力.小白们可以看下如何构建phonegap开发平台. 此文将说明如何建立一个可以被vs2015打开的phonegap的项目.我还会加上ion ...
- ionic2自定义radio样式
刚开始以为用的是字体图标,结果翻了代码一看竟然是通过纯css实现的,图标模式用的是ios,代码如下: .radio-ios .radio-checked { margin:; border-radiu ...
- Codeforces 755F PolandBall and Gifts bitset + 二进制优化多重背包
PolandBall and Gifts 转换成置换群后, 对于最大值我们很好处理. 对于最小值, 只跟若干个圈能否刚好组能 k 有关. 最直观的想法就是bitset优化背包, 直接搞肯定T掉. 我们 ...
- 15,EasyNetQ-高级API
EasyNetQ的使命是为基于RabbitMQ的消息传递提供最简单的API. 核心IBus接口有意避免公开AMQP概念,如交换,绑定和队列,而是实现基于消息类型的默认交换绑定队列拓扑. 对于某些场景, ...