ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)
背景:
使用ajax提交form表单时,提交按钮的type值写为了submit,导致ajax中回调函数中的提示信息toastr.success('提交数据成功');没有执行,只执行了alert语句
,就算toastr提示语句在alert前面写着也不执行。
function add_smoke() {
$.ajax({
//几个参数需要注意一下
cache:false,
type: "POST",//方法类型
dataType: "json",//预期服务器返回的数据类型
url: "/add_smoke/" ,//url
data: $('#add-smoke-form').serialize(),
async:false, //必须要为false,必须必须
success: function (data) {
console.log(data);//打印服务端返回的数据(调试用)
if(data.status == "success"){
{#关闭模态框并清除框内数据,否则下次打开还是上次的数据#}
document.getElementById("add-smoke-form").reset();
$('#myModal').modal('hide');
{# 判断确实正确入库之后提示#}
toastr.success('提交数据成功');
{#刷新表格数据#}
$("#mytab").bootstrapTable('refresh');
}
},
error : function() {
toastr.warning("请输入所有数据");
}
});
}
原因:
当使用ajax提交数据时,提交按钮的type必须是button,要保证ajax执行成功后可以顺序执行success方法体中的所有程序,则HTML中的submit按钮必须不能是submit类型,最好是写成type=”button”,因为默认情况下,即使你写了ajax提交的程序,但如果该按钮类型是submit时,当你点击了它,它既会执行ajax方法,也会执行浏览器默认的提交方法,导致的结果就是ajax还没执行结束,页面便刷新了一次,导致ajax中的方法没有完全执行。

ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)的更多相关文章
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- PHP防止页面刷新、重复提交数据
PHP防止页面刷新.重复提交数据 (2011-12-09 16:52:45) 转载▼ 标签: it 分类: php技术相关 闲来无事看了一下php session ,又在网上看了防止页面刷新重复提交数 ...
- django中form页面刷新后自动提交的解决方案
如果一个页面包含了form,同时这个form中的提交按钮是type=submit的input的时候,你刷新该页面,就会有弹窗提示是否重新提交表单,这个特性不胜其烦,常见解决方法有两个: 第一种是前端的 ...
- MVC页面上多个提交按钮提交到不同的Action
使用mvc扩展类,ActionNameAttribute方法如下: [AttributeUsage(AttributeTargets.Method, AllowMultiple = false, In ...
- 使用Ajax错误的全页面刷新问题
给提交按钮写了ajax请求,结果每次提交就将全业务刷新了.一大番折腾才知道是 提交按钮标签使用不当导致. button 标签请添加 type='button' 属性,因为浏览器默认会认为 butt ...
- jquery 的ajax无刷新上传文件之后,页面还是会莫名的刷新-----解决办法
文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...
- jsp登录页面,展示错误信息,刷新页面后错误依然存在解决方案
在做登录页面的时候,通常使用form表单同步提交的方法进行提交的,也就是在form表单里去写action,如果登录失败,jsp通过jstl表达式获取错误信息展示在页面上,但是有一个问题就是,即使你刷新 ...
- Ajax无刷新提交表单和显示
ajax无刷新表单提交: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- JavaScript + PHP 实现刷新继续保持倒计时的按钮
场景:发送一个验证码到手机,当验证码发出时,会提示隔 1 分钟之后可以再次发送.通常有这几种方式防止恶意请求,一是再次发送之前需要输入验证码,二是在指定的时间间隔之内不能再次发送. 有些网站在 1 分 ...
随机推荐
- 使用 HttpClient 进行 Post 方式通信
1.TestPost.java package testhttpclient; import java.io.IOException;import java.util.ArrayList;import ...
- 33、shuffle性能优化
一.shuffle性能优化 1.没有开启consolidation机制的性能低下的原理剖析 2.开启consolidation机制之后对磁盘io性能的提升的原理 spark.shuffle.conso ...
- [php][thinkphp] 记一次Composer Linux版安装以及用它进行thinkphp项目初始化
Composer安装thinkphp,thinkphp5.1开始官网不在提供下载包,只能通过git clone 和Composer包管理器进行下载. php中开启exec,system等函数调用系统命 ...
- STP生成树算法
生成树算法第一:决定谁是“根网桥”对比各个网桥ID,先对比ID中的优先级,优先级相同的时候对比网桥MAC地址,对比依据是谁的值最小,谁是“根网桥” 第二:决定哪些是“根端口”窍门——每个非根网桥上都有 ...
- 7、vueJs基础知识07
UI组件库 element-ui和mint-ui 其实都是借鉴了bootstrap bootstrap: 由twitter 开源 简洁.大方 官网文档https://www.bootcss.com/ ...
- 配置Windows实例NTP服务
本文介绍如何开启和配置Windows NTP服务,保证实例本地时间精确同步. Windows实例NTP服务介绍 目前,所有地域下ECS实例默认采用CST(China Standard Time)时区, ...
- Android 开发常用工具合集
在 Android 开发中经常使用到的小功能,用于记录开发的那些事^_^ 1. 获取 release 和 debug 版本的 SHA1 public static String getSHA1(Con ...
- python 椭球面
作者:chaowei wu链接:https://www.zhihu.com/question/266366089/answer/307037017来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...
- android: Android水波纹点击效果
Android API 21及以上新增了ripple标签用来实现水波纹的效果.我们可以通过设置ripple背景来实现一些View点击效果. 该水波纹效果有两种:一种是有界的(点击后类似于一个矩形向四周 ...
- 009 轮播图,offset系列
关于使用JS做轮播图,使用一个章节进行笔迹. 一:简单轮播图 1.程序 <!DOCTYPE html> <html lang="en"> <head& ...