浅析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 相关文章推荐
网页的标准,IMG不支持onload标签怎么办
Jun 29 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
js arguments,jcallee caller用法总结
Nov 30 Javascript
js+css实现导航效果实例
Feb 10 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
vue2.0+vue-dplayer实现hls播放的示例
Mar 02 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
JS实现音量控制拖动
Jan 15 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与MySQL交互使用详解
2006/10/09 PHP
PHP取进制余数函数代码
2012/01/19 PHP
分享PHP header函数使用教程
2013/09/05 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP测试框架PHPUnit组织测试操作示例
2018/05/28 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
关于webpack2和模块打包的新手指南(小结)
2017/08/07 Javascript
vue项目常用组件和框架结构介绍
2017/12/24 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
英国网上花店:Bunches
2016/11/29 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
网管求职信
2014/03/03 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
vue实现可以快进后退的跑马灯组件
2022/04/08 Vue.js
python解析照片拍摄时间进行图片整理
2022/07/23 Python