浅析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 相关文章推荐
JQuery操作tr和td内容的方法实例
Mar 06 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 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
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
juqery 学习之三 选择器 简单 内容
2010/11/25 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript结合CSS实现苹果开关按钮特效
2015/04/07 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
Jquery技巧(必须掌握)
2016/03/16 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
JavaScript学习小结之被嫌弃的eval函数和with语句实例详解
2016/08/01 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python中处理字符串之endswith()方法的使用简介
2015/05/18 Python
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
Python实现自动上京东抢手机
2018/02/06 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
Python selenium的基本使用方法分析
2019/12/21 Python
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
物理专业大学生职业生涯规划书
2014/02/07 职场文书
初中同学聚会感言
2014/02/11 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
对PyTorch中inplace字段的全面理解
2021/05/22 Python