热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

浅析onsubmit校验表单时利用ajax的returnfalse无效问题

前几天,在校验一个表单数据用到ajax时,遇到returnfalse无效问题,以下就是对这个问题进行了分析介绍,需要的朋友可以参考下
代码如下:

/**
 * 表单提交校验
 **/
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;

推荐阅读
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了如何通过WebBrowser控件在用户点击输入框时自动显示图片验证码。该过程可能涉及JavaScript事件的触发与响应。 ... [详细]
  • 本文探讨了如何在JavaScript中动态地引用由PHP生成的变量,特别是在循环中变量名随迭代变化的情况。通过示例代码展示了实现这一功能的具体步骤。 ... [详细]
  • AJAX技术允许网页在不重新加载整个页面的情况下进行异步更新,通过向服务器发送请求并接收JSON格式的数据,实现局部内容的动态刷新。 ... [详细]
  • 本文详细探讨了JavaScript中的闭包与柯里化技术,这两者是函数式编程的重要组成部分,对提升代码的灵活性和可维护性具有重要作用。 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • C# 对象转 JSON 字符串的方法与应用
    本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
  • 在使用Ant Design的Tabs组件时,遇到了动画抖动的问题。本文详细记录了从发现问题到最终解决的过程,包括尝试的各种方法和最终解决方案。 ... [详细]
  • 本文介绍了ThinkPHP框架的基本概念及其主要特性。作为一款遵循Apache许可证的开源框架,ThinkPHP不仅支持多种平台和Web服务器,还提供了丰富的功能以适应不同的开发需求。 ... [详细]
  • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
  • 我有这种ajax$.ajax({type:"POST",url:"bee_sesi_edit.php&# ... [详细]
  • 本文旨在深入探讨ASP.NET MVC框架的基本构成,包括其项目目录结构和关键的DLL文件,帮助开发者更好地理解和利用这一强大的Web开发工具。 ... [详细]
  • 深入理解Django中的AJAX应用
    本文详细介绍了AJAX技术及其在Django框架中的应用。AJAX,即异步JavaScript和XML,允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页。 ... [详细]
  • PHP 实现数据库数据处理并实时更新客户端状态
    本文介绍了使用 PHP 处理数据库中的数据,并在每次处理后实时向客户端反馈当前状态的方法。适合需要监控数据处理进度的应用场景。 ... [详细]
  • 本文介绍了两种有效的方法来提高DedeCMS文章页面的加载速度。首先,通过将页面头部的JavaScript代码外部化,减少每次请求时的数据传输量。其次,针对文章点击计数的延迟问题,采用AJAX技术进行异步加载,以改善用户体验。 ... [详细]
author-avatar
喝西北风的东北风_711
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有