浅析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 相关文章推荐
javascript innerText和innerHtml应用
Jan 28 Javascript
JQuery1.6 使用方法三
Nov 23 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
详解Vue快速零配置的打包工具——parcel
Jan 16 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 Javascript
elementUi vue el-radio 监听选中变化的实例代码
Jun 28 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 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 构造函数construct的前下划线是双的_
2009/12/08 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php中上传文件的的解决方案
2018/09/25 PHP
在textarea文本域中显示HTML代码的方法
2007/03/06 Javascript
用 javascript 实现的点击复制代码
2007/03/24 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
JavaScript中扩展Array contains方法实例
2020/08/23 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
jquery之别踩白块游戏的简单实现
2016/07/25 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
js 转义字符及URI编码详解
2017/02/28 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
微信小程序获取手机号授权用户登录功能
2017/11/09 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Python数据结构之顺序表的实现代码示例
2017/11/15 Python
python线程中同步锁详解
2018/04/27 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
python中sympy库求常微分方程的用法
2020/04/28 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
css3的focus-within选择器的使用
2020/05/11 HTML / CSS
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
员工培训邀请函
2014/01/11 职场文书
运动会致辞稿50字
2014/02/04 职场文书
《假如》教学反思
2014/04/17 职场文书
小学生环保演讲稿
2014/04/25 职场文书
计算机软件专业求职信
2014/06/10 职场文书
初中教师个人总结
2015/02/10 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书