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提交表单的更多相关文章

  1. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  2. Validator验证Ajax提交表单的方法

    Validator验证Ajax提交表单的方法 转自:http://hunanpengdake.iteye.com/blog/1671360 当我们在一些稍微复杂的业务时,可能会遇到需要多个表单form ...

  3. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  4. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  5. ajax提交表单序列化(serialize())数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...

  6. jquery实现ajax提交表单

    一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...

  7. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  8. Ajax提交表单初接触

    <!doctype html> <html class="no-js"> <head> <meta charset="utf-8 ...

  9. KindEditor:Ajax提交表单时获取不到HTML内容

    当用Ajax提交表单时,KindEditor的内容获取不到,HTML数据获取不了 原因:当ajax提交时,KindEdito的HTML数据还没有同步到表单中来,那怎么去获取HTML数据呢? ----- ...

随机推荐

  1. BigDecimal类(精度计算类)的加减乘除

    BigDecimal类 对于不需要任何准确计算精度的数字可以直接使用float或double,但是如果需要精确计算的结果,则必须使用BigDecimal类,而且使用BigDecimal类也可以进行大数 ...

  2. webstorm配置babel自动转译es6的方法

    1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...

  3. ios错误大全

    /读取数据库数据 -(void)movethesqlitefile{ NSString *sourcepath=[[NSBundle mainBundle]pathForResource:@" ...

  4. 数据提交方式:post和get

    众所周知,在B/S应用程序中,前台与后台的数据交互,都是通过HTML中Form表单完成的.而Form提供了两种数据传输的方式——get和post.           Get请求表示客户端请求一个ur ...

  5. you-get 下载网络上的富媒体信息

    You-Get 乃一小小哒命令行程序,提供便利的方式,下载网络上的富媒体信息. 利用you-get下载这个网页的视频: $ you-get http://www.fsf.org/blogs/rms/2 ...

  6. ios8 gps定位不好用

    这样让iOS8正常使用定位功能呢? <1>你需要在info.plist表里面添加两条变量 在Info.plist中加入两个缺省没有的字段 NSLocationAlwaysUsageDesc ...

  7. 【office2010】office2010安装问题的解决方案。

    今天想在公司电脑上按上一个office2010,结果出现一个问题,导致研究了一下午才解决:现总结解决方案: 安装office 2010,提示需要安装MSXML版本6.10.1129.0组件.但是在网上 ...

  8. angularJS中的ng-repeat指令!

    ng-repeat 指令: ng-repeat 指令用来遍历一个数组重复创建当前元素: <ul ng-app="myApp" ng-controller="myAp ...

  9. move_uploaded_file() 函数

    定义和用法 move_uploaded_file() 函数将上传的文件移动到新位置. 若成功,则返回 true,否则返回 false. 语法 move_uploaded_file(file,newlo ...

  10. poj2185 Milking Grid【KMP】

    Milking Grid Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 10084   Accepted: 4371 Des ...