flask使用ajax提交表单
Flask中使用ajax提交表单刷新数据,避免提交表单后使用return render_temp()会刷新页面
<form id ="test_form">
{{ form.hidden_tag() }}
<div id="input-top">
<div class="form-group">
<label>开始日期</label>
{{ form.begin_date }}
<label>结束时间</label>
{{ form.end_date }}
</div>
</div>
<!--{{ form.submit(class = "querybtn",onclick="ajaxForm()") }}--><!--这里如果用这个会造成表单提交两次,而且第二次是get会刷新页面-->
<button type="button" class = "querybtn" onclick="ajaxForm()">Click Me!</button>
</form>
最下边加一个按钮,点击的时候调用js中ajax的函数
ajax这边这么写
function ajaxForm(){
varifyinput();
var form= new FormData(document.getElementById("test_form"));
$.ajax({
url:"{{ url_for('main.all_revenue') }}",
type:"post",
data:form,
dataType: 'json',
processData:false,
contentType:false,
success:function(data){
create_table(data.result);
},
error:function(e){
alert("没有取得数据");
}
})
}
就这样
flask使用ajax提交表单的更多相关文章
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- Validator验证Ajax提交表单的方法
Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...
- lavarel框架中如何使用ajax提交表单
开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
- ajax提交表单序列化(serialize())数据
知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- ajax提交表单、ajax实现文件上传
ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...
- Ajax提交表单初接触
<!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...
- KindEditor:Ajax提交表单时获取不到HTML内容
当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...
随机推荐
- APP的缓存文件放在哪里?
只要是需要进行联网获取数据的APP,都会在本地产生缓存文件.那么,这些缓存文件到底放在什地方合适呢?系统有没有给我们提供建议的缓存位置呢?不同的缓存位置有什么不同呢? 考虑到卸载APP必须删除缓存 在 ...
- vue中的小踩坑(01)
前言: 昨天算是使用vue2.0+element-ui做了一点小小的页面,可是源于其中遇到的问题,特地整理一下,以防自己还有其他的小伙伴们继续踩坑. 过程: 1.不知道大家有没有注意到 ...
- excel——之锁定表头不可编辑
前言: 设置excel表头不可编辑功能.效果如下: 这就意味着,不可随意更改表头数据,除非你有密码. 过程: 1.先随意右键打开一个单元格,查看其中的“设置单元格属性”,即 2.在选中想要编辑的那些数 ...
- js二级联动
<body> <section> <a>省份</a> <select id="province"> <option ...
- mongodb学习(二)
昨天给ubuntu13.04安装ati的显卡驱动,ubuntu本来对ati的显卡支持不是很好,没办法unity启动器没有了,ccsm也没有任何作用,只得重新安装了12.10,近期也不打算升级13.04 ...
- LeetCode——Lowest Common Ancestor of a Binary Search Tree
Description: Given a binary search tree (BST), find the lowest common ancestor (LCA) of two given no ...
- apt-get install的默认安装路径
apt-get 命令 sudo apt-get update sudo apt-get install tree sudo apt-get -y install tree //跳过系统提示,直接安装. ...
- EUI组件之DataGroup
看官网教程,这个没法单独用. http://developer.egret.com/cn/github/egret-docs/extension/EUI/dataCollection/dataGrou ...
- CentOS6.8系统安装Oracle11g
1.官网上下载 软件安装包: linux.x64_11gR2_database_1of2.zip linux.x64_11gR2_database_2of2.zip 解压后: 生成文件夹: datab ...
- Mac - 苹果电脑mac系统释放硬盘空间方法汇总
硬盘空间是大家最头痛的一个问题,大家在硬盘空间变小的时候怎么腾空间的呢?下面为大家分享7个mac系统释放空间的高级方法,大家赶紧来收了! mac系统释放硬盘空间方法: 方法一:删除Emacs--可以节 ...