详解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用GET方法上传文件
Mar 10 Python
使用Python装饰器在Django框架下去除冗余代码的教程
Apr 16 Python
Python栈算法的实现与简单应用示例
Nov 01 Python
彻底搞懂Python字符编码
Jan 23 Python
Python 使用类写装饰器的小技巧
Sep 30 Python
使用python进行广告点击率的预测的实现
Jul 04 Python
python使用协程实现并发操作的方法详解
Dec 27 Python
python 爬取马蜂窝景点翻页文字评论的实现
Jan 20 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
Mar 23 Python
Python创建临时文件和文件夹
Aug 05 Python
详解Python中__new__方法的作用
Mar 31 Python
Python docx库删除复制paragraph及行高设置图片插入示例
Jul 23 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
咖啡的化学
2021/03/03 咖啡文化
php读取数据库信息的几种方法
2008/05/24 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
PHP explode()函数用法讲解
2019/02/15 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
2016/06/01 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
js两种拼接字符串的简单方法(必看)
2016/09/02 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
Python中使用PDB库调试程序
2015/04/05 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
把pandas转换int型为str型的方法
2019/01/29 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
What is EJB
2016/07/22 面试题
《中华少年》教学反思
2014/02/15 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
学会Python数据可视化必须尝试这7个库
2021/06/16 Python