需求：在浏览器端输入姓名，将数据发送给后端，后端将内容追加到 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 简单示例的更多相关文章

  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. const与#define相比有什么不同？

    C++语言可以用const定义常量,也可以用#define定义常量,但是前者比后者有更多的优点:● const常量有数据类型,而宏常量没有数据类型.编译器可以对前者进行类型安全检查,而对后者只进行字符 ...

  2. ionic3 安卓硬件返回

    platform.ready().then(() => { this.platform.registerBackButtonAction(() => { let activePortal ...

  3. 5、Filebeat工作原理

    Filebeat工作原理 Filebeat由两个主要组件组成:inputs和harvesters. 这些组件协同工作来查看最新文件内容并将事件数据发送到指定的输出.(注意与之前版本的不同,之前版本是p ...

  4. 怎样把PDF文件中的一页提取出来

    现在随着网络科技的发展在网上找资源找文件就像家常便饭一样,但是有很多文件下载完成之后只有几页是需要的这时候就很困惑了,这么多怎么才能看完啊.这样为了不浪费时间可以将有用的一页提取出来,进行使用,那怎样 ...

  5. node express+socket.io实现聊天室

    参照网址:https://www.jb51.net/article/135058.htm https://www.cnblogs.com/limitcode/p/7845168.html https: ...

  6. creating server tcp listening socket 127.0.0.1:6379: bind No error

    参考链接:https://blog.csdn.net/n_fly/article/details/52692480 1.window10环境下面安装的redis,之前安装好弄了一下,过了好几天,再次使 ...

  7. SpringBoot Mybatis项目中的多数据源支持

    1.概述 有时项目里里需要抽取不同系统中的数据源,需要访问不同的数据库,本文介绍在Springboot+Mybatis项目中如何支持多数据源操作. 有需要的同学可以下载 示例代码 项目结构如下: 2. ...

  8. Python学习（三十九）—— Django之Form组件

    一.构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字.你需要类似这样的模板: <form action="/your-name/" method=&qu ...

  9. rabbitmq-cluster搭建

    一.前期准备: 准备3台linux系统,配置好公司源,或者官网下载相应的网络源 1.条件:准备3台linux系统,确保能连到download.yunwei.edu 2.编写yum源下载脚本: #vim ...

  10. 学习 Vim —— Vimtutor 总结笔记

    Lesson 2 2.1-2.3 删除 [dw] 删除从光标开始处至下一词开始前的部分,光标停在下一词的词首. [de] 删除从光标开始处至词尾的部分. [d$] 删除从光标开始处至行末的部分. 2. ...