浅析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传值 判断
Oct 26 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
jQuery属性选择器用法示例
Sep 09 Javascript
js实现文字选中分享功能
Jan 25 Javascript
javascript获取指定区间范围随机数的方法
Sep 08 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
详解js类型判断
May 22 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 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
yii框架通过控制台命令创建定时任务示例
2014/04/30 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
css图片自适应大小
2007/11/28 Javascript
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Python魔法方法详解
2019/02/13 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Tensorflow实现酸奶销量预测分析
2019/07/19 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Python通过format函数格式化显示值
2020/10/17 Python
python爬虫如何解决图片验证码
2021/02/14 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
中专生职业生涯规划书范文
2014/01/10 职场文书
服装行业创业计划书范文
2014/02/05 职场文书
党建工作经验交流材料
2014/05/25 职场文书
2014年教师节讲话稿5篇
2014/09/10 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
团员个人年度总结
2015/02/26 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
Java基于字符界面的简易收银台
2021/06/26 Java/Android
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
win10更新失败无限重启解决方法
2022/04/19 数码科技