浅析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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
JavaScript日历实现代码
Sep 12 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】
Jul 19 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
Vue开发中整合axios的文件整理
Apr 29 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
javascript使用正则实现去掉字符串前面的所有0
Jul 23 Javascript
搭建一个Koa后端项目脚手架的方法步骤
May 30 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
ip签名探针
2006/10/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
PHP经典设计模式之依赖注入定义与用法详解
2019/05/21 PHP
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
js自定义input文件上传样式
2018/10/26 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
使用python和Django完成博客数据库的迁移方法
2018/01/05 Python
详解分布式任务队列Celery使用说明
2018/11/29 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
tensorflow 查看梯度方式
2020/02/04 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
python新手学习可变和不可变对象
2020/06/11 Python
Python存储读取HDF5文件代码解析
2020/11/25 Python
Python开发.exe小工具的详细步骤
2021/01/27 Python
瑜伽国际:Yoga International
2018/04/18 全球购物
业务员薪酬管理制度
2014/01/15 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
十佳文明家庭事迹
2014/05/25 职场文书
市场营销专业毕业生求职信
2014/07/21 职场文书
2015年电工工作总结
2015/04/10 职场文书