zoukankan      html  css  js  c++  java
  • JQuery的ajax函数执行失败,alert函数弹框一闪而过

    先查看<form>标签是否有action属性,如果没有,并且最后<button>标签的type属性为'submit‘时,默认提交位置就是当前页面

    如果在页面右键检查,点击网络,会在开头发现这样的post包:

    在右侧消息头处可见,请求网址为当前网址,并且响应头部类型为html

    所以只要把form表单里最后提交按钮type="submit"换为type="button",把按钮变成原生按钮,

    就可以正确使用ajax方法传递数据,原因就是form表单最后的提交按钮与使用ajax传递数据冲突了

    因为这个原因浪费了挺久时间,甚至把代码又从头到尾写了一遍(感觉自己好蠢啊!),总结了一下调试过程。

    先贴一下ajax代码:

            $(function () {
                $("#register").on('click',function () {
                    $.ajax({
                        type: 'post',
                        url:"{:url('insert')}",
                        data:$('#login').serialize(),
                        dataType:'json',
                        success:function (data) {
                            alert('成功');
                        },
                        error:function () {
                            alert('error');
                        }
                    })
                })
            });

    这里‘#register’是提交按钮,‘#login’是表单,url发送到一个php脚本(插入表单数据到数据库)。

    用谷歌浏览器打开页面,点击注册按钮后,当前页面刷新,没有任何反应。

    正常情况下,ajax执行正确或失败,根据上述代码都应该有消息弹窗,于是感觉到哪里出了问题。

    打开数据库,发现表单的数据都已经插入到数据库了,说明后台php脚本是运行成功的,只是在返回数据的时候出现了问题。

    右键检查找到该post包,发现响应头部类型为html,而我设置的返回类型为json。

    更换了Edge浏览器,问题同样是数据库插入了数据,但是结果没有消息弹窗。

    更换火狐浏览器,再次点击注册按钮时出现了消息弹窗,但是闪了一下就没了!隐隐约约发现弹窗显示为‘error’(感谢火狐浏览器!)

    根据alert弹窗一闪而过这个线索,发现了解决问题的这篇文章,同时感谢这篇文章的博主。

    参考:关于layer的提示框,弹出框一闪而过的问题

  • 相关阅读:
    关于在MAC上进行 LARAVEL 环境 Homestead 安装过程记录
    js 贷款计算器
    js 实现阶乘
    js 两点间距离函数
    composer Your requirements could not be resolved to an installable set of packages
    vue 项目优化记录 持续更新...
    vue 项目打包
    vue 真机调试页面出现空白
    vue 真机调试
    谈谈-Android状态栏的编辑
  • 原文地址:https://www.cnblogs.com/sfriend/p/10676193.html
Copyright © 2011-2022 走看看