flask表单提交的两种方式
一.通用方式
通用方式就是使用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)
flask表单提交的两种方式的更多相关文章
- asp.net mvc表单提交的几种方式
asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...
- Form 表单提交的几种方式
简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的 这种方式最近到一个form提供action路径后台接受就可以< ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- js阻止表单提交的两种方法
下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 表单提交的两种请求方式:post与get。post与get两者的对比分析
post与get两者的对比分析:
- 表单提交的3种方式,http post的contentType
application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...
- form表单提交的几种方法
form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...
- jquery ajax提交表单数据的两种方式
http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...
随机推荐
- iOS开发中常用的单例
定义:一个类的对象,无论在何时创建.无论创建多少次,创建出来的对象都是同一个对象. 使用场景:当有一些数据需要共享给别的类的时候,就可以把这些数据保存在单例对象中. 关键代码: + (instan ...
- 移动Web开发(一)
1.浅谈Web标准 降低开发复杂度,覆盖的技术层面十分广泛,技术标准化. 以HTML为核心,扩展出几个大类的技术标准: a.程序访问: ECMAScript(ES) 3 . ES 5 . ES ham ...
- C++语言-06-文件操作
C语言文件操作 C++语言是C语言的超集,是在C语言的基础上增加了面向对象的特性而创造出来的,最初被命名为带类的C.所以C++语言中包含了C语言的思想,如:C++语言中文件操作的原理与步骤与C语言基本 ...
- Nodejs之MEAN栈开发(九)---- 用户评论的增加/删除/修改
由于工作中做实时通信的项目,需要用到Nodejs做通讯转接功能,刚开始接触,很多都不懂,于是我和同事就准备去学习nodejs,结合nodejs之MEAN栈实战书籍<Getting.MEAN.wi ...
- .NET框架设计(常被忽视的框架设计技巧)
阅读目录: 1.开篇介绍 2.元数据缓存池模式(在运行时构造元数据缓存池) 2.1.元数据设计模式(抽象出对数据的描述数据) 2.2.借助Dynamic来改变IOC.AOP动态绑定的问题 2.3.元数 ...
- poi生成word文件
一.简介 对于poi来说,poi可以完成对word.excel.ppt的处理.word目前有两种文件格式,一种是doc后缀.另一种是docx后缀的.2007之前的版本都是doc后缀的,这种格式poi使 ...
- QT学习第1天
QT学习第一天 坚持住!! 一 Qt概述 1.Qt发展历史 (1)1991年诞生(Haavard Nord/Eirik Chambe-Eng), (2)1994年创立Troll Tech(奇趣科技) ...
- android switch(String)错误:Cannot switch on a value of type String for source level below 1.7
switch语句的判断条件可以接受int,byte,char,short,不能接受其他类型只有JDK版本1.7以上才可以支持String 设置如下可解决问题:(若没有JDK1.7版,可下载一下安装)菜 ...
- 初试MarkDown
· 要写个文档,突然就想到要不要试试学学MarkDown,整理一下大致过程 · 首先搜到这篇文章 ,简单介绍了MarkDown,以及OS X 平台上一个简单的工具 mou (目前仍免费) 相关新闻不做 ...
- 新手必学的java报表开发工具FineReport实用技巧
1.在制作模板时,如何将报表中的值传递到超链接网页呢? 在项目中以frame方法把F1.CPT放到项目的页面中,对F1.CPT做网络报表超链接F2.CPT,然后在F2.cpt页面中,做个超链接的网页, ...