前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决

2024-03-28 12:52
文章标签 表单 解决 异步 提交 前端开发 form frontend 故障 引起 action ajax 冲突 避坑 submit

本文主要是介绍前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决！

近期在开发网站前端的时候，始终出现2次请求。困扰了很久。查询了网上的解决办法。发现，根源是因为，我的form表单里增加了一个action。虽然里面是空的，但是依然会在点击submit格式的按钮时，触发一次请求。这就引起了一种怪异的现象。

虽然ajax执行了成功！数据库执行了追加数据操作。但是页面始终停留在当前地址。

非常怪异，实际上，大家去掉form表单内的action，改一下submit,改成button模式，就可以恢复正常了。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>用户注册-积德寺-菩提佛堂app-网页版</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="keywords" content="许愿祈福,祈福网站"/><meta name="description" content="欢迎注册菩提佛堂app账号信息，可以参加线上共修活动！"/><link th:href="@{/static/css/mycommon.css}" rel="stylesheet" type="text/css"><link th:href="@{/static/css/login.css}" rel="stylesheet" type="text/css"><script th:src="@{/static/js/jquery.js}"></script><style>.qifu_main {margin:10px auto;padding:14px;border: 1px solid #99CC00;border-radius: 8px;background: rgba(235, 179, 22, 0.8);text-align: center;font-size: 1.0em;width: 80%;height:auto;}.qifu_main .form_register {width: auto;height: auto;}.qifu_main p img{width: 80%;}.qifu_main .form_register .item {margin: 8px auto;padding-bottom: 12px;text-align: left;width: auto;height: auto;}.qifu_main .form_register  button {display: block;width: 100px;height: 30px;border-radius: 10px;background-color: #ffb100;font-size: 1.0em;color: #FFFFFF;margin: 5px auto;}.qifu_main .form_register .item select{width: 30%;height: 26px;}.qifu_main .form_register .item input{width: 100%;height: 26px;}.qifu_main .form_register .item .icon-input{display: inline-block;height: 30px;line-height: 30px;}.qifu_main .form_register .item label img{width: 30px;height: auto;}</style>
</head>
<body>
<div th:replace="header :: top"></div>
<!--开始注册-->
<div class="qifu_main"><p>欢迎注册会员</p><form  id="form_register" class="form_register"><div class="item"><label for="uname"><img th:src="@{/static/images/icon-lianhua.png}">名字:</label><input type="text" required id="uname" name="username" minlength="2" maxlength="10"  placeholder="您的名字不超过10个字"><span class="msg-default hidden" id="namespan">用户名长度最小为2,最大为10</span></div><div class="item"><label for="upassword"><img th:src="@{/static/images/icon-lianhua.png}">密码:</label><input type="password" required id="upassword" minlength="6" maxlength="10" name="password"   placeholder="请设置您的密码"><span class="msg-default hidden">密码长度在6到10位之间</span></div><div class="item"><label for="upwdconfirm"><img th:src="@{/static/images/icon-lianhua.png}">验证密码:</label><input type="password" required id="upwdconfirm" name="upwdconfirm" minlength="6" maxlength="10"  placeholder="请再次输入密码"><span class="msg-default hidden">密码长度在6到10位之间</span></div><div class="item"><label for="phone"><img th:src="@{/static/images/icon-lianhua.png}">手机:</label><input type="phone" required id="phone" name="phone" maxlength="11" pattern="(\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$" placeholder="请输入手机号码"><span class="msg-default hidden" id="phonespan">手机长度最大50位</span></div><div class="item"><label for="email"><img th:src="@{/static/images/icon-lianhua.png}">邮箱:</label><input type="email" required id="email" name="email" maxlength="100"  placeholder="请输入邮箱"><span class="msg-default hidden" id="emailspan">邮箱长度最大100位</span></div><div class="item"><button type="button" id="btnRegister" >提交</button>&nbsp;&nbsp;<button type="reset" >重置</button></div></form>
</div>
<!--结束注册-->
<div th:replace="footer :: footer"></div>
<script>/*1.对用户名进行验证*///当对象失去焦点触发验证流程uname.onblur = function(){if(this.validity.valueMissing){this.nextElementSibling.innerHTML = '用户名不能为空';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('用户名不能为空');}else if(this.validity.tooShort){this.nextElementSibling.innerHTML = '用户名不能少于2位';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('用户名不能少于2位');}else {this.nextElementSibling.innerHTML = '用户名格式正确';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');var data =$("#uname").val();if(!data){   //用户没有输入任何内容return;}/**发起异步GET请求，询问服务器用户名是否已经存在**/$.ajax({url:"../user/checkName",data:"username="+$("#uname").val(),type:"get",dataType:"json",success:function(obj){$("#namespan").html(obj.message);//显示服务器的响应信息if(obj.state==0){$("#namespan").attr("class","msg-error");}else{$("#namespan").attr("class","msg-success");}}});}}uname.onfocus = function(){this.nextElementSibling.innerHTML = '用户名长度在2到10位之间';this.nextElementSibling.className = 'msg-default';}upassword.onfocus = function(){this.nextElementSibling.innerHTML = '密码长度在6到10位之间';this.nextElementSibling.className = 'msg-default';}upassword.onblur = function(){if(this.validity.valueMissing){this.nextElementSibling.innerHTML = '密码不能为空';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('密码不能为空');}else if(this.validity.tooShort){this.nextElementSibling.innerHTML = '密码长度在尽量别少于6位';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('密码长度在尽量别少于6位');}else {this.nextElementSibling.innerHTML = '密码格式正确';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');}}upwdconfirm.onfocus = function(){this.nextElementSibling.innerHTML = '密码长度在6到10位之间';this.nextElementSibling.className = 'msg-default';}//当确认密码输入框失去焦点时触发验证。upwdconfirm.onblur = function(){if(this.validity.valueMissing){this.nextElementSibling.innerHTML = '密码不能为空';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('密码不能为空');}else if(this.validity.tooShort){this.nextElementSibling.innerHTML = '密码长度在尽量别少于6位';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('密码长度在尽量别少于6位');}else {this.nextElementSibling.innerHTML = '密码格式正确';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');var pwd1 =$("#upassword").val();var pwd2 =$("#upwdconfirm").val();if(pwd1!=pwd2){this.nextElementSibling.innerHTML = '两次输入密码不一致';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('密码长度在尽量别少于6位');}else{this.nextElementSibling.innerHTML = '两次输入密码一致';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');}}}/*3.对邮箱地址进行验证*/email.onblur = function(){if(this.validity.valueMissing){this.nextElementSibling.innerHTML = '邮箱不能为空';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('邮箱不能为空');}else if(this.validity.typeMismatch){this.nextElementSibling.innerHTML = '邮箱格式不正确';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('邮箱格式不正确');}else {this.nextElementSibling.innerHTML = '邮箱格式正确';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');var data =document.getElementById("email").value;if(!data){   //用户没有输入任何内容return;}/**发起异步GET请求，询问服务器邮箱是否已经存在**/$.ajax({url:"../user/checkEmail",data:"email="+$("#email").val(),type:"get",dataType:"json",success:function(obj){$("#emailspan").html(obj.message);if(obj.state==0){$("#emailspan").attr("class","msg-error");}else{$("#emailspan").attr("class","msg-success");}}});}}email.onfocus = function(){this.nextElementSibling.innerHTML = '请输入合法的邮箱地址';this.nextElementSibling.className = 'msg-default';}/*3.对手机号进行验证*/phone.onblur = function(){if(this.validity.valueMissing){this.nextElementSibling.innerHTML = '手机号不能为空';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('手机号不能为空');}else if(this.validity.patternMismatch){this.nextElementSibling.innerHTML = '手机号格式不正确';this.nextElementSibling.className = 'msg-error';this.setCustomValidity('手机号格式不正确');}else {this.nextElementSibling.innerHTML = '手机号格式正确';this.nextElementSibling.className = 'msg-success';this.setCustomValidity('');var data =document.getElementById("phone").value;if(!data){   //用户没有输入任何内容return;}/**发起异步GET请求，询问服务器用户名是否已经存在**/$.ajax({url:"../user/checkPhone",data:"phone="+$("#phone").val(),type:"get",dataType:"json",success:function(obj){$("#phonespan").html(obj.message);if(obj.state==0){$("#phonespan").attr("class","msg-error");}else{$("#phonespan").attr("class","msg-success");}}});}}phone.onfocus = function(){this.nextElementSibling.innerHTML = '请输入合法的手机号';this.nextElementSibling.className = 'msg-default';}
</script>
<script>$('#btnRegister').click(function(){var lengths=0;$('.item').each(function(){if($(this).find('span').hasClass('msg-success')){lengths++;}});//异步注册提交if(lengths==5){$.ajax({url:"../user/register",data:$("#form_register").serialize(),//相当于表单内的提交表单值集合。必须使用到nametype:"post",dataType:"json",success:function(obj){if(obj.state==0){console.log(obj.state)$("#namespan").html(obj.message)$("#namespan").attr("class","msg-error")}else if(obj.state==1){console.log(obj.state)window.location = "../user/showLogin"}},error:function (obj){$("#namespan").html(obj.message)$("#namespan").attr("class","msg-error")}});}})
</script>
</body>
</html>

如图所示，这个就是，我修改后的代码，里面button，之前是submit.form的内容页删掉了action.

这篇关于前端开发避坑-form表单action和submit提交与ajax异步提交冲突引起的故障解决的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/855672。

相关文章

vite搭建vue3项目的搭建步骤

vite搭建vue3项目的搭建步骤

《vite搭建vue3项目的搭建步骤》本文主要介绍了vite搭建vue3项目的搭建步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1.确保Nodejs环境2.使用vite-cli工具3.进入项目安装依赖1.确保Nodejs环境
阅读更多...
Nginx搭建前端本地预览环境的完整步骤教学

Nginx搭建前端本地预览环境的完整步骤教学

《Nginx搭建前端本地预览环境的完整步骤教学》这篇文章主要为大家详细介绍了Nginx搭建前端本地预览环境的完整步骤教学,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录项目目录结构核心配置文件：nginx.conf脚本化操作：nginx.shnpm 脚本集成总结：对前端的意义很多
阅读更多...
IDEA和GIT关于文件中LF和CRLF问题及解决

IDEA和GIT关于文件中LF和CRLF问题及解决

《IDEA和GIT关于文件中LF和CRLF问题及解决》文章总结：因IDEA默认使用CRLF换行符导致Shell脚本在Linux运行报错,需在编辑器和Git中统一为LF,通过调整Git的core.aut... 目录问题描述问题思考解决过程总结问题描述项目软件安装shell脚本上git仓库管理，但拉取后，上l
阅读更多...
前端缓存策略的自解方案全解析

前端缓存策略的自解方案全解析

《前端缓存策略的自解方案全解析》缓存从来都是前端的一个痛点,很多前端搞不清楚缓存到底是何物,：本文主要介绍前端缓存的自解方案,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、为什么“清缓存”成了技术圈的梗二、先给缓存“把个脉”：浏览器到底缓存了谁？三、设计思路：把“发版”做成“自愈”四、代码
阅读更多...
通过React实现页面的无限滚动效果

通过React实现页面的无限滚动效果

《通过React实现页面的无限滚动效果》今天我们来聊聊无限滚动这个现代Web开发中不可或缺的技术,无论你是刷微博、逛知乎还是看脚本,无限滚动都已经渗透到我们日常的浏览体验中,那么,如何优雅地实现它呢？... 目录1. 早期的解决方案2. 交叉观察者：IntersectionObserver2.1 Inter
阅读更多...
解决docker目录内存不足扩容处理方案

解决docker目录内存不足扩容处理方案

《解决docker目录内存不足扩容处理方案》文章介绍了Docker存储目录迁移方法：因系统盘空间不足,需将Docker数据迁移到更大磁盘（如/home/docker）,通过修改daemon.json配... 目录1、查看服务器所有磁盘的使用情况2、查看docker镜像和容器存储目录的空间大小3、停止dock
阅读更多...
Vue3视频播放组件 vue3-video-play使用方式

Vue3视频播放组件 vue3-video-play使用方式

《Vue3视频播放组件vue3-video-play使用方式》vue3-video-play是Vue3的视频播放组件,基于原生video标签开发,支持MP4和HLS流,提供全局/局部引入方式,可监听... 目录一、安装二、全局引入三、局部引入四、基本使用五、事件监听六、播放 HLS 流七、更多功能总结在 v
阅读更多...
idea npm install很慢问题及解决(nodejs)

idea npm install很慢问题及解决(nodejs)

《ideanpminstall很慢问题及解决(nodejs)》npm安装速度慢可通过配置国内镜像源（如淘宝）、清理缓存及切换工具解决,建议设置全局镜像（npmconfigsetregistryht... 目录idea npm install很慢(nodejs)配置国内镜像源清理缓存总结idea npm in
阅读更多...
idea突然报错Malformed \uxxxx encoding问题及解决

idea突然报错Malformed \uxxxx encoding问题及解决

《idea突然报错Malformeduxxxxencoding问题及解决》Maven项目在切换Git分支时报错,提示project元素为描述符根元素,解决方法：删除Maven仓库中的resolv... 目www.chinasem.cn录问题解决方式总结问题idea 上的 maven China编程项目突然报错，是
阅读更多...
在Ubuntu上打不开GitHub的完整解决方法

在Ubuntu上打不开GitHub的完整解决方法

《在Ubuntu上打不开GitHub的完整解决方法》当你满心欢喜打开Ubuntu准备推送代码时,突然发现终端里的gitpush卡成狗,浏览器里的GitHub页面直接变成Whoathere!警告页面... 目录一、那些年我们遇到的"红色惊叹号"二、三大症状快速诊断症状1：浏览器直接无法访问症状2：终端操作异常
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2