一.通用方式

通用方式就是使用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 &nbsp</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 &nbsp</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表单提交的两种方式的更多相关文章

  1. asp.net mvc表单提交的几种方式

    asp.net MVC中form提交和控制器接受form提交过来的数据 MVC中form提交和在控制器中怎样接受 1.cshtml页面form提交2.控制器处理表单提交数据4种方式方法1:使用传统的R ...

  2. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  3. JS表单提交的几种方式

    第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...

  4. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  5. 使用JS和JQuery 阻止表单提交的两种方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 表单提交的两种请求方式:post与get。post与get两者的对比分析

    post与get两者的对比分析:

  7. 表单提交的3种方式,http post的contentType

    application/x-www-form-urlencoded:窗体数据被编码为名称/值对.这是标准的编码格式.这是默认的方式 multipart/form-data:窗体数据被编码为一条消息,页 ...

  8. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  9. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

随机推荐

  1. windows 8安装wp8之后鼠标没反应了

    笔记本是windows 8 系统,昨天安装了windows phone 8.0 SDK 之后,发现无线鼠标没反应了,但是触摸屏鼠标可以正常移动!真是奇怪,旁边同学也是安装了这个sdk,但没出什么问题! ...

  2. ios 怎么解决Could not find Developer Disk Image

  3. iOS 跳转到系统的设置界面

    跳到健康设置   上网找了一下  你会发现很难找到.代码如下  不信你试试 . NSURL *url = [NSURL URLWithString:@"prefs:root=Privacy& ...

  4. OC中的私有变量和description

    .OC中的私有变量 在类的实现即.m @implementation中也可以声明成员变量,但是因为在其他文件中通常都只 是包含头文件而不会包含实现文件,所以在.m文件中声明的成员变量是@private ...

  5. runtime之玩转成员变量

    前言: 不铺垫那么多,单刀直入吧:runtime是一个C和汇编写的动态库,就像是一个小小的系统,将OC和C紧密关联在一次,这个系统主要做两件事情. 1,封装C语言的结构体和函数,让开发者在运行时创建, ...

  6. 网站错误记录:Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool.

    今天看公司项目的错误日志文件,发现日志文件都是记录的这个错误. 经过网站查找,发现英文翻译是: 译:超时,与连接池的连接时间已过.这种情况发生是因为连接池在使用和最大连接池数目已满 通过翻译,可以看出 ...

  7. 详解javascript,ES5标准中新增的几种高效Object操作方法

    1.Object 对象 (JavaScript) 提供对所有 JavaScript 对象通用的功能.参考网站:https://msdn.microsoft.com/zh-cn/library/kb6t ...

  8. jQuery 更改checkbox的状态,无效

    今天写页面遇到复选框动态全选或全不选问题,正常写法如下: $("#tb").find("input[type='checkbox']").attr(" ...

  9. Symantec Backup Exec备份作业服务器盘符变更

    Symantec Backup Exec的备份作业中,如果某个服务器的磁盘更改了盘符,如果不修改备份作业里面的相关配置,就会出现类似下面的错误信息,如下截图所示 因为这台服务器上我们将原先的G盘的盘符 ...

  10. 导出HTML

    版权声明:本文为博主原创文章,未经博主允许不得转载.