浅析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 wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
js中unicode转码方法详解
Oct 09 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
localStorage的黑科技-js和css缓存机制
Feb 06 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
JS Canvas接口和动画效果大全
Apr 29 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中文本操作的类
2007/03/17 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
jQuery实现简单的日期输入格式化控件
2015/03/12 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
2016/05/12 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
利用angular.copy取消变量的双向绑定与解析
2016/11/25 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
ES6新特性八:async函数用法实例详解
2017/04/21 Javascript
如何用webpack4带你实现一个vue的打包的项目
2018/06/20 Javascript
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python open()文件处理使用介绍
2014/11/30 Python
python中split方法用法分析
2015/04/17 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python3 操作符重载方法示例
2017/11/23 Python
Python numpy 常用函数总结
2017/12/07 Python
python书籍信息爬虫实例
2018/03/19 Python
Python if语句知识点用法总结
2018/06/10 Python
numpy的文件存储.npy .npz 文件详解
2018/07/09 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
pyqt5 实现多窗口跳转的方法
2019/06/19 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
公务员学习习总书记“三严三实”思想汇报
2014/09/19 职场文书
2014年检验员工作总结
2014/11/19 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
Sql Server之数据类型详解
2022/02/28 SQL Server
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技