需求：在浏览器端输入姓名，将数据发送给后端，后端将内容追加到 user.json 中，并将该文件中的数据，返回到浏览器打印

1、浏览器端（html文件）

index.html文件

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9. <div class="user">
  10.     <input type="text" name="user">
  11.     <input type="button" value="提交">
  12. </div>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
  14. <script>
  15.  
  16.     /*  get请求
  17.     $.ajax({
  18.         url:'http://localhost:8800/course',
  19.         type:'get',
  20.         dataType:'json',
  21.         success:function (data) {
  22.  
  23.            console.log(data);
  24. //            console.log(data);
  25. //            var a = JSON.parse(data);
  26. //            console.log(a);
  27. //            var str_pretty1 = JSON.stringify(a);
  28. //            console.log(str_pretty1)
  29.         },
  30.         error:function () {
  31.  
  32.         }
  33.     })
  34.     */
  35.  
  36.     // post请求
  37.     $('input[type=button]').click(function () {
  38.  
  39.         $.ajax({
  40.             url: "http://127.0.0.1:8800/create",
  41.             type: 'post',
  42.             data: {
  43.                 name: $('input[type=text]').val()
  44.             },
  45.             success: function (data) {
  46.                 console.log(data);
  47.             }
  48.         })
  49.     })
  50.  
  51. </script>
  52. </body>
  53. </html>

2、server端（py文件）

　　使用之前需要下载模块：flask　　　　pip3 install flask

  1. #! /usr/bin/env python
  2. # -*- coding: utf-8 -*-
  3. # Date: 2018/6/5
  4.  
  5. import json
  6. # 导入模块
  7. from flask import Flask
  8. from flask import request
  9. from flask import Response
  10.  
  11. #创建实例化请求对象
  12. app = Flask(__name__)
  13.  
  14. # 定义路由
  15. @app.route("/")
  16. # 路由对应的函数处理
  17. def index():
  18.     # 响应数据
  19.     resp = Response("<h2>首页</h2>")
  20.     # 允许所有跨域访问
  21.     resp.headers["Access-Control-Allow-Origin"] = "*"
  22.     return resp
  23.  
  24. @app.route("/course")
  25. def courses():
  26.     # 业务逻辑
  27.  
  28.     # 返回json序列化的数据
  29.     resp = Response(json.dumps({
  30.         "name": 'alex'
  31.     }))
  32.     resp.headers["Access-Control-Allow-Origin"] = "*"
  33.  
  34.     return resp
  35.  
  36. # 前端发送post请求
  37. # 定义路由
  38. @app.route("/create", methods=["post", ])
  39. def create():
  40.     print(request.form.get('name'))
  41.     # 读取user.json中的原始的数据
  42.     with open("user.json", "r") as f:
  43.         # 将数据反序列化
  44.         data = json.loads(f.read())
  45.  
  46.     # 将新数据添加到原始的数据中
  47.     data.append({"name": request.form.get('name')})
  48.  
  49.     # 将此时最新的数据再次写入文件中
  50.     with open("user.json", "w") as f:
  51.         f.write(json.dumps(data))
  52.  
  53.     # 再次返回最新的数据 响应会前端
  54.     resp = Response(json.dumps(data))
  55.  
  56.     resp.headers["Access-Control-Allow-Origin"] = "*"
  57.  
  58.     return resp
  59.  
  60. if __name__ == '__main__':
  61.  
  62.     app.run(host="localhost", port=8800, )

3、服务端中存放的user.json

　　　　数据以后会存放在数据库中，现在暂时放在文件中

  1. [{"name": "\u5f20\u4e09"}, {"name": "alex"}, {"name": "alex1"}, {"name": "alex12"}, {"name": "alex123"}]

ajax的get和post请求 -- 基于flask 简单示例的更多相关文章

  1. flask 简单示例

    flask import flask from flask import jsonify from flask import request # 要获取到请求参数的话,就要导入这个模块 ''' 创建接 ...

  2. 使AJAX可缓存——基于flask

    主流浏览器都有缓存机制,主要基于HTTP协议定义的缓存策略.对于一定时间内不发生变动的文档缓存起来,对于下次请求,就可以直接返回缓存的结果.使用缓存有以下好处: 1.减少冗余的数据传输,节省网络流量成 ...

  3. ajax请求基于restFul的WebApi(post、get、delete、put)

    近日逛招聘软件,看到部分企业都要求会编写.请求restFul的webapi.正巧这段时间较为清闲,于是乎打开vs准备开撸. 1.何为restFul? restFul是符合rest架构风格的网络API接 ...

  4. 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 ...

  5. Django框架 之 基于Ajax中csrf跨站请求伪造

    Django框架 之 基于Ajax中csrf跨站请求伪造 ajax中csrf跨站请求伪造 方式一 1 2 3 $.ajaxSetup({     data: {csrfmiddlewaretoken: ...

  6. 基于flask的网页聊天室（三）

    基于flask的网页聊天室(三) 前言 继续上一次的内容,今天完成了csrf防御的添加,用户头像的存储以及用户的登录状态 具体内容 首先是添加csrf的防御,为整个app添加防御: from flas ...

  7. Python flask 基于 Flask 提供 RESTful Web 服务

    转载自 http://python.jobbole.com/87118/ 什么是 REST REST 全称是 Representational State Transfer,翻译成中文是『表现层状态转 ...

  8. 基于flask+gunicorn+nginx来部署web App

    基于flask+gunicorn&&nginx来部署web App WSGI协议 Web框架致力于如何生成HTML代码,而Web服务器用于处理和响应HTTP请求.Web框架和Web服务 ...

  9. [转]python实现RESTful服务（基于flask）

    python实现RESTful服务(基于flask) 原文: https://www.jianshu.com/p/6ac1cab17929  前言 上一篇文章讲到如何用java实现RESTful服务, ...

随机推荐

  1. 【算法】K最近邻算法（K-NEAREST NEIGHBOURS，KNN）

    K最近邻算法(k-nearest neighbours,KNN) 算法 对一个元素进行分类 查看它k个最近的邻居 在这些邻居中,哪个种类多,这个元素有更大概率是这个种类 使用 使用KNN来做两项基本工 ...

  2. Django-瀑布流

    1.通过ajax方式实现滚动条瀑布流(1)创建数据库:xixi\pubu\models.py from django.db import models #Img图片表 class Img(models ...

  3. jQuery第七章插件的编写和使用

    1.本章目标 编写jquery插件 2.插件 也称为扩展,是一种按照一定的规范的应用程序接口编写出来的程序 插件的目标是给已有的一系列函数做一个封装,以便在其他的地方复用,方便维护和开发效率 3.jq ...

  4. Kafka（二）CentOS7.5搭建Kafka2.11-1.1.0集群与简单测试

    一.下载 下载地址: http://kafka.apache.org/downloads.html    我这里下载的是Scala 2.11对应的 kafka_2.11-1.1.0.tgz 二.kaf ...

  5. 昨天开始使用lr controller 已停止工作问题

    其实看到这个,只能看日志 看到日志也是无能为力 然后只能尝试修复,但是无法解决,最后通过重装系统,问题解决

  6. github使用的小坑 处理

    1.本地版本 低于线上版本,并做了修改 ,线上版本也做了修改的情况下,提交内容,必须解决冲突 会出现 解决方法 冲突的几个文件 进行初始还原 在进行 更新 与线上同步,在将需要提交的/新增/修改的内容 ...

  7. BZOJ3160 万径人踪灭 字符串 多项式 Manachar FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8810140.html 题目传送门 - BZOJ3160 题意 给你一个只含$a,b$的字符串,让你选择一个子序列 ...

  8. Service,测试

    这里介绍一些symfony的一些其他内容 1.创建并使用自定义service 首先创建service目录,在下面自定义一个类,并设置测试方法,之后在resources目录下面的services.xml ...

  9. sql修改一个字段多个值

    UPDATE 表名 SET 修改的字段=REPLACE(修改的字段,'修改的值','新值');

  10. git命令详解（ 六 ）

    此为git命令的第六篇 远程跟踪分支 不知道大家有没有发现在前面几篇中Git 好像知道 master 与 o/master 是相关的.当然这些分支的名字是相似的,可能会让你觉得是依此将远程分支 mas ...