表单提交前onclick使用reuturn时,ajax请求同步异步的一点注意事项

本文主要是介绍表单提交前onclick使用reuturn时,ajax请求同步异步的一点注意事项,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

因为会经常用到ajax提交请求判断一些信息,比如,用户账号名是否存在等等,但如果是在提交表单数据按钮的onclick时,用return check()来跳转去最后验证一下表单数据是否为空等等。需要注意一些问题。

当进行ajax请求时,如果success回调得到的结果是错误的,使用return false是没有办法返回check()函数false结果的,因为你在回调函数里,只是返回在里层的函数。于是会发现表单照样提交。比如:

function check(){$name = $("#name").val();$.post("check.php",{name:name},function(data){data = JSON.parse(data);if(data.code != 200){return false;}});
}

上面的代码return false只是跳出ajax请求函数而已,并没有给check函数任何返回。

于是会想到使用临时标记变量去判断识别:例如

function check(){$name = $("#name").val();$flag = 0;$.post("check.php",{name:name},function(data){data = JSON.parse(data);if(data.code != 200){return false;}else{flag = 1;return true;}});if(flag === 0){return false;}return true;
}

可是这样再试,你会发现表单是不进行提交了,但是你回调数据判断正确时,你却怎么也提交不了表单!这时可以在flag判断前打印flag的值console.log(flag),发现flag=0,而不是1。

然后你仔细观察会发现在命令行里,flag的值的打印时间比ajax请求完成时间更早,这是因为 $.get/post函数默认使用的是异步通信。当请求时,会相别于主线程,再开始一个线程用于ajax请求,两个线程同时进行。

因此在这种情况下,你需要使用同步通信,只能使用$.ajax函数进行ajax请求

$.ajax({url: "check.php",type: "POST",async: false,    //同步请求data: {name:name},success: function(data){data = JSON.parse(data);if(data.code != 200){return false;}else{flag = 1;return true;}}
});

这篇关于表单提交前onclick使用reuturn时,ajax请求同步异步的一点注意事项的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1015389

相关文章

Java Thread中join方法使用举例详解

《JavaThread中join方法使用举例详解》JavaThread中join()方法主要是让调用改方法的thread完成run方法里面的东西后,在执行join()方法后面的代码,这篇文章主要介绍... 目录前言1.join()方法的定义和作用2.join()方法的三个重载版本3.join()方法的工作原

Spring AI使用tool Calling和MCP的示例详解

《SpringAI使用toolCalling和MCP的示例详解》SpringAI1.0.0.M6引入ToolCalling与MCP协议,提升AI与工具交互的扩展性与标准化,支持信息检索、行动执行等... 目录深入探索 Spring AI聊天接口示例Function CallingMCPSTDIOSSE结束语

Linux系统之lvcreate命令使用解读

《Linux系统之lvcreate命令使用解读》lvcreate是LVM中创建逻辑卷的核心命令,支持线性、条带化、RAID、镜像、快照、瘦池和缓存池等多种类型,实现灵活存储资源管理,需注意空间分配、R... 目录lvcreate命令详解一、命令概述二、语法格式三、核心功能四、选项详解五、使用示例1. 创建逻

在Java中使用OpenCV实践

《在Java中使用OpenCV实践》用户分享了在Java项目中集成OpenCV4.10.0的实践经验,涵盖库简介、Windows安装、依赖配置及灰度图测试,强调其在图像处理领域的多功能性,并计划后续探... 目录前言一 、OpenCV1.简介2.下载与安装3.目录说明二、在Java项目中使用三 、测试1.测

C++中detach的作用、使用场景及注意事项

《C++中detach的作用、使用场景及注意事项》关于C++中的detach,它主要涉及多线程编程中的线程管理,理解detach的作用、使用场景以及注意事项,对于写出高效、安全的多线程程序至关重要,下... 目录一、什么是join()?它的作用是什么?类比一下:二、join()的作用总结三、join()怎么

mybatis中resultMap的association及collectio的使用详解

《mybatis中resultMap的association及collectio的使用详解》MyBatis的resultMap定义数据库结果到Java对象的映射规则,包含id、type等属性,子元素需... 目录1.reusltmap的说明2.association的使用3.collection的使用4.总

如何在Java Spring实现异步执行(详细篇)

《如何在JavaSpring实现异步执行(详细篇)》Spring框架通过@Async、Executor等实现异步执行,提升系统性能与响应速度,支持自定义线程池管理并发,本文给大家介绍如何在Sprin... 目录前言1. 使用 @Async 实现异步执行1.1 启用异步执行支持1.2 创建异步方法1.3 调用

Spring Boot配置和使用两个数据源的实现步骤

《SpringBoot配置和使用两个数据源的实现步骤》本文详解SpringBoot配置双数据源方法,包含配置文件设置、Bean创建、事务管理器配置及@Qualifier注解使用,强调主数据源标记、代... 目录Spring Boot配置和使用两个数据源技术背景实现步骤1. 配置数据源信息2. 创建数据源Be

Java中使用 @Builder 注解的简单示例

《Java中使用@Builder注解的简单示例》@Builder简化构建但存在复杂性,需配合其他注解,导致可变性、抽象类型处理难题,链式编程非最佳实践,适合长期对象,避免与@Data混用,改用@G... 目录一、案例二、不足之处大多数同学使用 @Builder 无非就是为了链式编程,然而 @Builder

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分