浅析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 request函数 用来获取url参数
May 17 Javascript
js用Date对象处理时间实现思路及代码
Jan 31 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
理解JavaScript原型链
Oct 25 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
Vue学习之组件用法实例详解
Jan 06 Javascript
JavaScript十大取整方法实例教程
Dec 03 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获取url字符串截取路径的文件名和扩展名的函数
2010/01/22 PHP
PHP中SimpleXML函数用法分析
2014/11/26 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP数组相加操作及与array_merge的区别浅析
2016/11/26 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
JQuery对ASP.NET MVC数据进行更新删除
2016/07/13 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
javaScript 连接打印机,打印小票的实例
2017/12/29 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python异常的检测和处理方法
2018/10/26 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
县优秀教师事迹材料
2014/01/31 职场文书
教师个人鉴定材料
2014/02/08 职场文书
2014年基建工作总结
2014/12/12 职场文书