浅析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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
img的onload的另类用法
Jan 10 Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 Javascript
node.js中的fs.unlink方法使用说明
Dec 15 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
js全选按钮的实现方法
Nov 17 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
基于element-ui封装表单金额输入框的方法示例
Jan 06 Javascript
JavaScript canvas实现跟随鼠标移动小球
Feb 09 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
基于pear auth实现登录验证
2010/02/26 PHP
PHP定时自动生成静态HTML的实现代码
2010/06/20 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
深入认识javascript中的eval函数
2009/11/02 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
JavaScript 学习历程和心得分享
2010/12/12 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
jquery ajax属性async(同步异步)示例
2013/11/05 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
深入理解js中this的用法
2016/05/28 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
详解js中常规日期格式处理、月历渲染和倒计时函数
2016/12/28 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
Python里隐藏的“禅”
2014/06/16 Python
Python数据类型详解(二)列表
2016/05/08 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
windows下python安装pip图文教程
2018/05/25 Python
Django REST框架创建一个简单的Api实例讲解
2019/11/05 Python
python可以用哪些数据库
2020/06/22 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
ziaja齐叶雅官方海外旗舰店:来自波兰的天然护肤品牌
2017/01/02 全球购物
印尼网上商店:Alfacart.com
2019/03/11 全球购物
铣床操作工岗位职责
2014/06/13 职场文书
订货会邀请函
2015/01/31 职场文书
2015年小学远程教育工作总结
2015/07/28 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书