详解flask表单提交的两种方式


Posted in Python onJuly 21, 2018

一.通用方式

通用方式就是使用ajax或者$.post来提交。

前端html

<form method="post" action="/mockservice" method = "post">
   ... 

  <div class="form-group">
    <label>data <font style="color:#a94442" size="2">
    <input class="form-control" id="data" name="data">
  </div>
  <div class="form-group">
    <button id="start" type="submit" class="btn btn-default">Submit  </button>
  </div>
</form>

将操作绑定

$(document).ready(function() {
  MockTask.start();
});

MockTask ={
  startId: "start_mock",
  start: function(){
    $('#'+this.startId).click(function (){



...var data = $('#data').val();

      var form_data = JSON.stringify({
       ..."data": data
      });
      MockSubmit.createTask(form_data);

    });
  },
};

MockSubmit = {
  createTask: function(data){
    var url = "/mockservice";
    $.post(url,data,function(result){
      if (result.code != 'SUCC'){
        alert("failed to create a new api.")
      } else {
        alert("succ");
      }
    });
  }
};

function isEmptyString(info) {
  if (info == null || info == undefined || info.length == 0){
    return true;
  }
  return false
}

这样通过js来实现提交表单的功能,然后flask后端

@app.route("/mockservice",methods=['GET','POST'])
def MockController():
  form = MockCreate()
  if request.method == 'POST':
    code = request.form['code']
    api = request.form['api']
  return ...

通用方式的好处就是在其他框架中也适用。而且也并不复杂。

二.比较正宗的flask方式

前端html:

<form method="post" action="/mockservice" method = "post">
   ...

  <div class="form-group">
    <label>data <font style="color:#a94442" size="2">
    <input class="form-control" id="data" name="data">
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-default">Submit  </button>
  </div>
</form>

前端这时候可以不用绑定操作了,但需要新建一个form对象,用这种方式的好处就是flask有很多内置的方式帮你校验你的提交,一个字:省事!

class MockCreate(Form):
  user_email = StringField("email address",[validators.Email()])
  api = StringField("api",[Required()])
  submit = SubmitField("Submit")
  code = IntegerField("code example: 200",[Required()])
  alias = StringField("alias for api")
  data = TextAreaField("json format",[Required()])

后端这时候就要变成:

@app.route("/mockservice",methods=['GET','POST'])
def MockController():
  form = MockCreate()
  code = form['code']
  api = form['api']
  return render_template("testf.html",api=api,data=code)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python备份Mysql脚本
Aug 11 Python
python 文件与目录操作
Dec 24 Python
详解Python的Django框架中inclusion_tag的使用
Jul 21 Python
Python环境搭建之OpenCV的步骤方法
Oct 20 Python
python实现二叉查找树实例代码
Feb 08 Python
Python基于opencv的图像压缩算法实例分析
May 03 Python
python和shell获取文本内容的方法
Jun 05 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
Jun 26 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
Dec 20 Python
简单了解django orm中介模型
Jul 30 Python
Python FFT合成波形的实例
Dec 04 Python
利用Matlab绘制各类特殊图形的实例代码
Jul 16 Python
python实现周期方波信号频谱图
Jul 21 #Python
Flask-Mail用法实例分析
Jul 21 #Python
python实现傅里叶级数展开的实现
Jul 21 #Python
Python实现快速傅里叶变换的方法(FFT)
Jul 21 #Python
Python实现获取本地及远程图片大小的方法示例
Jul 21 #Python
opencv python 傅里叶变换的使用
Jul 21 #Python
Numpy中的mask的使用
Jul 21 #Python
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
JavaScript 事件记录使用说明
2009/10/20 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js Map List 遍历使用示例
2013/07/10 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
深入理解javascript中的立即执行函数(function(){…})()
2014/06/12 Javascript
JS表的模拟方法
2015/02/05 Javascript
JavaScript对HTML DOM使用EventListener进行操作
2015/10/21 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Python上传package到Pypi(代码简单)
2016/02/06 Python
python将回车作为输入内容的实例
2018/06/23 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
Django REST framework内置路由用法
2019/07/26 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
struct与class的区别
2014/02/03 面试题
成人教育自我鉴定
2013/11/01 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
高中生的自我评价
2014/03/04 职场文书
大学生个人求职信
2014/06/02 职场文书
社区两委对照检查材料
2014/08/23 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers