详解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连接sql server乱码的解决方法
Jan 28 Python
python BeautifulSoup使用方法详解
Nov 21 Python
python和pyqt实现360的CLable控件
Feb 21 Python
详解Python字符串对象的实现
Dec 24 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
Aug 08 Python
Python3解决棋盘覆盖问题的方法示例
Dec 07 Python
Python Json模块中dumps、loads、dump、load函数介绍
May 15 Python
python制作简单五子棋游戏
Jun 18 Python
python用match()函数爬数据方法详解
Jul 23 Python
Python字符串查找基本操作代码案例
Oct 27 Python
想学画画?python满足你!
Dec 24 Python
Python+uiautomator2实现自动刷抖音视频功能
Apr 29 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
Content-type 的说明
2006/10/09 PHP
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js实现表格字段排序
2014/02/19 Javascript
JavaScript数组常用操作技巧汇总
2014/11/17 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JQuery勾选指定name的复选框集合并显示的方法
2015/05/18 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
pandas的排序和排名的具体使用
2019/07/31 Python
详解python中*号的用法
2019/10/21 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物