ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)

摘要:
背景:当使用Ajax提交表单时,提交按钮的类型值写为submit,导致Ajax中回调函数中出现提示消息toast;不执行,只执行警报语句,即使在警报之前写入了toast prompt语句,也不会执行它。

背景:

  使用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)第1张

免责声明:文章转载自《ajax页面刷新小错误(提交按钮type必须为button,而不能是submit)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Prism初研究之依赖管理[CF1333C]Eugene and an array下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

按钮颜色样式

按钮颜色样式 .el-alert--success { background-color: #e7faf0; color: #13ce66;} .el-alert--warning { background-color: #fff8e6; color: #FFBA00;} .el-alert--info { background-color: #f4f4f...

ZK框架笔记5、事件

        事件是org.zkoss.zk.ui.event.Event类,它通知应用程序发生了什么事情。每一种类型的事件都由一个特定的类来表示。         要响应一个事件,应用程序必须为事件注册一个或更多事件监听器。有3种方式可以为一个组件事件监听器。   (1)一般制定onXXX事件监听器为组件的属性,作为属性定义的事件监听器。 &...

Django:使用模态框新增数据,成功后提示“提交成功”,并刷新表格bootstrap-table数据

废话不说先看图:    代码实现:   前台代码: {% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>项目...

JQuery ajax回调函数

转自http://zhengyh2008.blog.163.com/blog/static/13894713201003041633526/ jquery ajax 回调函数 返回值 js文件: $.ajaxSetup({ async: false }); function oncheck(oid){var rs=true;if(oid=="stunu...

window.open()不同源页面通信

父页面 运行端口:8080 <template> <div> <el-button @click="open()">发送消息给子页面</el-button> </div> </template> <script> export default{ na...

vue+element-ui 实现数据的增删改查以及分页(举例新增学生)

1.首先获取所有的学生信息并显示在表格上,进行分页。 后台要求传的参数: 后台接口封装: element-ui创建数据。必须有HTML表格 <el-table :data="studentData" border style=" 100%"> <el-table-column prop="id" label="学号"></...