浅析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 相关文章推荐
jQuery Ajax使用 全解析
Dec 15 Javascript
javascript常用的正则表达式实例
May 15 Javascript
javascript将异步校验表单改写为同步表单
Jan 27 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
js图片延迟加载(Lazyload)三种实现方式
Mar 01 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
js 取消页面可以选中文字的功能方法
Jan 02 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
Mar 19 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
Apr 29 Javascript
vue配置文件实现代理v2版本的方法
Jun 21 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
基于Vue+Webpack拆分路由文件实现管理
Nov 16 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查询参数的方法
2015/04/14 PHP
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
Dom 学习总结以及实例的使用介绍
2013/04/24 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
javascript常用方法汇总
2014/12/02 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
2018/11/10 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
JS使用H5实现图片预览功能
2019/09/30 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python装饰器的函数式编程详解
2015/02/27 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python用模块pytz来转换时区
2016/08/19 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Python 实现毫秒级淘宝抢购脚本的示例代码
2019/09/16 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
Python3-异步进程回调函数(callback())介绍
2020/05/02 Python
python函数map()和partial()的知识点总结
2020/05/26 Python
从python读取sql的实例方法
2020/07/21 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
求职简历自荐信
2013/10/20 职场文书
抄作业检讨书
2014/02/17 职场文书
网络编辑岗位职责
2014/03/18 职场文书
python文件目录操作之os模块
2021/05/08 Python