浅析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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
javascript 网页进度条简单实例
Feb 22 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
ant design pro中可控的筛选和排序实例
Nov 17 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
解析如何在PHP下载文件名中解决乱码的问题
2013/06/20 PHP
php自定义的格式化时间示例代码
2013/12/05 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
js 页面输出值
2008/11/30 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
浅析javascript函数表达式
2016/02/10 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
微信小程序自定义弹出层效果
2020/05/26 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
python 正则式使用心得
2009/05/07 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Django数据统计功能count()的使用
2020/11/30 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
学校少先队工作总结
2015/08/12 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python