浅析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实现多域名不同文件的调用方法
Jan 12 Javascript
JS完成代码前最好对其做5件事
Apr 07 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
javascript中SetInterval与setTimeout的定时器用法
Aug 24 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
在Vue.js中使用TypeScript的方法
Mar 19 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 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获取301跳转URL简单实例
2013/12/16 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
从零开始学习jQuery (二) 万能的选择器
2010/10/01 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
微信小程序实现全国机场索引列表
2018/01/31 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
python执行子进程实现进程间通信的方法
2015/06/02 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python梯度下降法的简单示例
2018/08/31 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
如何用Python破解wifi密码过程详解
2019/07/12 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
学生党员一帮一活动总结
2014/07/08 职场文书
2014年党课学习心得体会
2014/07/08 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
党员批评与自我批评材料
2014/10/14 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
Elasticsearch 批量操作
2022/04/19 Python