注意在ajax中return false 为什么表单还是会提交呢

最新推荐文章于 2022-11-15 09:58:36 发布
转载 最新推荐文章于 2022-11-15 09:58:36 发布 · 2k 阅读 · 2

本文探讨了使用Ajax进行表单验证时遇到的问题，特别是如何正确处理return false的情况，并给出了解决方案，包括通过设置同步请求及利用标志变量传递验证结果。

当我们用ajax去获取后台数据并做一些表单验证的时候，会发现return false没有用，

看看平时的写法：

function  xxx()

{

$.ajax({

success:function(data)

{

if(data.flag)

{

return true  / false;//返回的内容并不是被onsubmit所接收，而是xxx这个function，所以需要另外借住一个变量来接收这个标志（true or false）再在$.ajax()外return 给onsubmit

}

}


})


}

具体是这样

var flag=false;

$.ajax({
    async:false, ////要设置为同步的，要不CheckUserName的返回值永远为false
    url: "${ctx}/register/registeremail.do",
    type: "Post",
    data: {"email" : email},
    success: function(transport){
                   if(transport==0){
                         var html;
                         document.getElementById("em").style.display="inline";
                         html="<font color=010203>恭喜您,该邮箱可以注册!</font>";
                         $("#em").html(html);
                         clearError(frm["email"]);
                        myflag=true;
                 }else{
                       addErrors(frm["email"],"对不起!该邮箱已经注册!");
                       document.getElementById("em").style.display="none";
                      flag=true;
                  }
         }
});
// alert(flag + "...邮箱...");
 if(flag){
        return false;
 }


ajax提交时表单自动提交，阻止表单的默认提交事件
马句
08-29 1977
一、问题描述 在改版pc一个动态发布页面的时候 页面使用的form表单提交页面数据 其中在页面中有一个人员选择的搜索按钮 按钮上绑定了点击事件触发ajax 每次点击搜索就会莫名其妙的把表单给自动提交了 一脸懵逼啊 二、解决办法 ①在form标签中添加οnsubmit="return false;" 表单按钮onclick事件： onclick="return true"...
精选资源
浅析onsubmit校验表单时利用ajax的return false无效问题
01-21
代码如下:/** * 表单提交校验 **/function onSubmit(){ if($(‘#name’).val().length<2){ alert(“名称请不少于两个汉字”); return false; } var t = new Date().getTime(); $.ajax({ type: ...
用javascript调用表单验证事件时，为什么return false了还是把表单submit了？
weixin_30295091的博客
08-23 246
表单提交前，都会有定义一个验证的方法以对用户提交的内容进行限定，今天写到了这个，但出现了一个好郁闷的东西，就是一点提交了，调用我自己写的一个CheckForm()方法时，我明明写了return false了，但它还是提交到服务器了，好不郁闷！然后仔细检查才发现，原来是漏了个return，下面先看出错的代码： 1 <script src="../js/jquery-1.6.js" ty...
ajax提交表单的一些注意事项:解释为什么return false却依然提交
shaozengwei的专栏
03-18 329
ajax提交表单的一些注意事项.ajax提交表单是经常用到的.一般ajax提交要求不再跳转,自然而然的用到了return false .但是你知道 return false 无效,有哪些原因吗? 1.js代码有错误,语法错误,逻辑错误,等等. 语法错误相对容易解决,firebug可以看得清楚.逻辑错误就得仔细排查了; 2.跨域. www.xiaojudeng.com 域名下ajax请求 w...
js中return后表单仍提交
huaqfei
02-13 455
今天做表单提交，遇到了个很恶心的问题：当提交按钮是图片时，图片的onclick事件能正确执行js函数，可输入框的onkeydown事件在执行同一个函数时，在return后居然还是进行了提交操作！ 相应的代码如下： [code="java"] 关键字： ...
JS返回false表单仍然提交Action的问题
WEN_Windy的博客
09-12 518
<form action="XXX" enctype="multipart/form-data" method="post" onsubmit="return check()"> <input id="myfile" name="myfile" type="file" /> <input type="submit" value="Excel转Html" />&nbsp;</form> </body> <script..
关于在LayUI中使用AJAX提交巨坑记录
10-16
在LayUI中使用AJAX进行表单提交时，可能会遇到一些坑，这些坑主要体现在前端与后端交互过程中的一些不一致或者预期之外的行为。本文将深入探讨这个问题，并提供解决方案。 首先，LayUI是一个轻量级的前端组件库，它...
jQuery ajax提交Form表单实例(附demo源码)
11-27
`getFormJson`函数将表单元素转换为JSON格式的键值对，如果有多个同名的输入项，它们会被存储在一个数组中。`ajaxSubmit`函数则将这些数据和表单的`action`、`method`属性用于`$.ajax`调用。 在实际使用中，我们...
JQuery打造PHP的AJAX表单提交实例
12-09
但在AJAX提交表单的情况下，`action`属性可以为空，因为我们将使用JavaScript来处理提交过程。每个输入字段都有唯一的`id`，这对于后续的JavaScript验证和操作至关重要。 ```html <!-- 表单字段和错误提示标签 ...
$.ajax 将form表单也提交了
上帝已死
10-30 500
加上这个属性即可， async : false,
关于ajax中return false无效的问题
weixin_30257433的博客
10-13 367
onSubmit="return checkForm();" 方法中： 在ajax里直接写return false，是无效的。 因为它返回的是ajax中的success方法，而不是checkForm()。 因此可以设置一个全局变量用来做判断，实现停止的效果。 注意：ajax一定要是同步的。 ----------------------------------------...
关于form表单通过ajax return false失败的原因
fjh1370505782的博客
01-07 484
看了好久全部是说通过更改async：false,都认为是以为ajax异步的原因，实则不然 function submit(){ $.ajax({ ... success:function(){ return false; } }); } 大家的ajax都是这样的吧。然后百度找了半天都找不到问题所在。 其实当我们return的时候只是跳出function,
关于form表单在ajax中return false仍然提交的内容
heartOfblack 离开了电脑，我不希望我还有病
09-12 5360
在实现form表单的时候，我们往往会有一些需求，就是对表单数据进行验证，再决定是否提交表单内容。 而默认的form表单的默认事件，就是提交表单内容，那么应该如何进行判断呢？ 通常有两种写法，原理都一样，只是习惯不同，一种就是form的 onsubmit事件，另一种则去掉input  type='submit'这个默认提交按钮，改成一个普通的button来执行提交事件(你会发现如果你改成
【Ajax学习】通过Ajax提交表单数据
qq_53582888的博客
11-15 1582
注意:在使用serialize()函数快速获取表单数据时，必须为每个表单元素添加name属性!serialize()函数的好处:可以一次性获取到表单中的所有的数据。注意：是给form标签绑定submit事件，而不是给里面的表单组件绑定。在jQuery 中。1.serialize()函数。
表单提交-form提交和ajax提交
热门推荐
gghh2015的博客
01-21 1万+
1、使用场景： 安全性都一样，都是发送的http协议。安全性与提交文件的业务处理（格式检测，防注入）有关，与提交方式无关。 一般登录用表单提交，点击提交触发submit事件，一般会 使页面发生跳转，页面的跳转等行为的控制往往在后端，后端控制页面的跳转及数据的传递；但是某些时候不希望页面跳转，或者说想要将控制权放在前端，通过js来操作页面的跳转或数据变化，一般这种
Ajax提交表单
最新发布
09-26
使用 Ajax 提交表单主要有以下几种方法： ### jQuery 中的 $.ajax 方法 通过创建 `FormData` 对象收集表单数据，并使用 `$.ajax` 方法发送请求。以下是示例代码： ```javascript function submitImage() { // 这里把表单的 ID 传进去 var obj = new FormData(document.getElementById("coachForm")); $.ajax({ type: 'post', url: '${pageContext.request.contextPath}/upload/coachImgPic.do', data: obj, // 告诉 jQuery 不要去处理发送的数据 processData: false, // 告诉 jQuery 不要去设置 Content-Type 请求头，因为表单已经设置了 multipart/form-data contentType: false, success: function (data) { console.log(data); $('#imgpic').attr(data); $('#photo').attr(data); } }); } ``` 上述代码中，通过 `FormData` 对象获取表单数据，然后使用 `$.ajax` 方法将其发送到指定的 URL，并在成功时更新页面元素 [^2]。 ### 原生 JavaScript 方法 使用 `XMLHttpRequest` 对象来实现表单数据的提交，示例代码如下： ```javascript const submit = function (formEle) { return new Promise(function (resolve, reject) { // Serialize form data // See https://htmldom.dev/serialize-form-data-into-a-query-string const params = serialize(formEle); // Create new Ajax request const req = new XMLHttpRequest(); req.open('POST', formEle.action, true); req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); // Handle the events req.onload = function () { if (req.status >= 200 && req.status < 400) { resolve(req.responseText); } }; req.onerror = function () { reject(); }; // Send it req.send(params); }); }; // 用法 const formEle = document.getElementById(...); submit(formEle).then(function (response) { // `response` is what we got from the back-end // We can parse it if the server returns a JSON const data = JSON.parse(response); ... }); ``` 上述代码中，定义了 `submit` 函数，它接受一个表单元素作为参数，将表单数据序列化后使用 `XMLHttpRequest` 对象发送请求，并通过 `Promise` 处理响应 [^4]。 ### 通过监听表单提交事件并序列化数据 在表单的 `onsubmit` 事件中阻止默认提交行为，然后使用 `serialize()` 函数获取表单数据并通过 `$.ajax` 发送请求。示例代码如下： ```javascript // 假设表单 ID 为 addTaskform $('#addTaskform').on('submit', function (e) { e.preventDefault(); // 阻止表单默认提交行为 $.ajax({ type: 'post', url: 'your-url', data: $('#addTaskform').serialize(), success: function (data) { console.log(data); } }); }); ``` 上述代码中，监听表单的提交事件，阻止默认提交行为，然后使用 `serialize()` 函数将表单数据序列化并通过 `$.ajax` 方法发送 [^1][^3]。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值