浅析onsubmit校验表单时利用ajax的return false无效问题


Posted in Javascript onJuly 10, 2013
/**
 * 表单提交校验
 **/
function onSubmit(){
    if($('#name').val().length<2){
        alert("名称请不少于两个汉字");
        return false;
    }
    var t = new Date().getTime();
    $.ajax({
        type: "POST",
        url: "/users/checkrepeat/",
   data: "name=" + $('#name').val() + "&time=" + t,
        success:function(res){
            if(res == 'exists'){
                alert("名称已存在,请修改.");
                return false;
            }
        }
    });
}

问题原因:
1. ajax时return false 的function与onsubmit()不是同一个函数;
2. 在ajax执行时,async默认的设置值为true,这种情况为异步方式,就是说当ajax发送请求后,在等待server端返回的这个过程中,前台会继续 执行ajax块后面的脚本,直到server端返回正确的结果才会去执行success,也就是说这时候执行的是两个线程,ajax块发出请求后一个线程 和ajax块后面的脚本(另一个线程)。

修改后的代码:

/**
 * 表单提交校验
 **/
function onSubmit(){
    if($('#name').val().length<2){
        alert("名称请不少于两个汉字");
        return false;
    }    
    var flag = true;
    var t = new Date().getTime();
    $.ajax({
        type: "POST",
        async:false,  // 设置同步方式
        cache:false,
        url: "/users/checkrepeat/",
   data: "name=" + $('#name').val() + "&time=" + t,
        success:function(res){
            if(res == 'exists'){
                alert("名称已存在,请修改.");
                flag = false;
            }
        }
    });
    if(!flag)
        return false;
Javascript 相关文章推荐
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
Jul 10 #Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 #Javascript
javascript 手动给表增加数据的小例子
Jul 10 #Javascript
基于javascript 闭包基础分享
Jul 10 #Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 #Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 #Javascript
浅析js封装和作用域
Jul 09 #Javascript
You might like
php代码优化及php相关问题总结
2006/10/09 PHP
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php4与php5的区别小结(配置异同)
2011/12/20 PHP
javascript 写类方式之三
2009/07/05 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
Bootstrap插件全集
2016/07/18 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
ztree简介_动力节点Java学院整理
2017/07/19 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
详解Vue 全局变量,局部变量
2019/04/17 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
Python读取ini文件、操作mysql、发送邮件实例
2015/01/01 Python
浅谈Python 对象内存占用
2016/07/15 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
实例讲解Python中整数的最大值输出
2019/03/17 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
详解python中的模块及包导入
2019/08/30 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
为2021年的第一场雪锦上添花:用matplotlib绘制雪花和雪景
2021/01/05 Python
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
Conforama瑞士:家具、厨房、电器、装饰
2020/09/06 全球购物
CLR与IL分别是什么含义
2016/08/23 面试题
公安纪律作风整顿剖析材料
2014/10/10 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
公司业务员管理制度
2015/08/05 职场文书