表单onsubmit事件无效以及表单onsubmit使用ajax无效解决
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
今天在做登陆页面,想法是这样的:
前台提交表单给后台,如果用户名密码不正确,就提示用户用户名密码不对,并不跳转,也不重定向,而当用户名和密码输入正确的时候,跳转到登陆之后的页面。
这个过程需要用到的技术主要就是ajax技术和js的onsubmit(onclick也可以)技术。
过程如下:
1.用户输入用户名和密码
2.当用户点击submit按钮时,先执行onsubmit函数,利用ajax进行用户名密码验证。
3.1验证不通过,onsubmit返回false,表单无法提交,页面提示用户密码有错。
3.2验证通过,onsubmit返回true,表单提交,服务器返回用户内部视图,登陆成功。
表单如下:
<form action="login.do" method="post"><input type="text" id="username" name="username"><input type="password" id="password" name="password"><button type="submit" onclick="return checkusers()">
</form>
onclick中的方法必须有一个return,不然无论如何都会提交表单。(原理你应该懂得!)
这里有一个必须注意的地方:ajax有两种方式,一种是同步方式,一种是异步方式。
粗略地讲,如果有下面这段js脚本:
<script type="text/javascript">function checkpwd(){//1............$.ajax({//2........});//3.........}
</script>
如果是同步方式:当1执行完毕后,接着执行ajax,线程会处于等待状态,等2执行完毕之后,接着执行3.
如果是异步方式:当1执行完毕之后,接着执行ajax,但是ajax不会阻塞主线程,ajax执行的同时会执行3.
因此,当使用异步方式进行验证的时候,会出现无论如何,onsubmit(onclick)都不会起作用,这会让程序员感觉自己的代码有问题,其实代码没问题,是逻辑的问题。要解决这个问题,我们就必须用ajax的同步方式。
下面展示错误的ajax验证方式:
function checkpwd(){ //由checkuser调用此函数var state = 0;var url = "checkpwd.do";var args = {"password":document.getElementById("password").value}; $.POST(url,args,function(data){if(data == "false") state = 0;else if(data == "true") state = 1;});if(state == 1) return true;else return false;}
因此,这种方式将会导致在执行$.POST的时候下面的代码已经执行了,所以看到ajax根本没效果。
原因是:jquery中封装的$.POST和$.GET使用的是异步的方式。因此我们不能使用$.POST和$.GET或者说需要将其设置为同步方式。为了简便,我们还是使用$.ajax(),因为这个封装的函数中用户可以自定义使用同步方式或者使用异步方式。 当然使用js原始的XMLHttpRequest......
下面是正确的方式:
function checkpwd(){var state = 0;/* var url = "checkpwd.do"; *//* var args = {"password":document.getElementById("password").value}; *//* $.POST(url,args,function(data){if(data == "false") return false;else if(data == "true") return true;}); */$.ajax({type : "post",url : "checkpwd.do",data : "password=" + document.getElementById("password").value,async : false,success : function(data){if(data == "true") state=1;}});if(state == 1) return true;else return false;}
这样的话,会执行完毕ajax之后才进行返回操作。
这里是ajax的一些参考示例:
原始ajax使用:
function loadXMLDoc()
{var xmlhttp;if (window.XMLHttpRequest){// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码xmlhttp=new XMLHttpRequest();}else{// IE6, IE5 浏览器执行代码xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}}xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); //true表示使用异步方式xmlhttp.send();
}
使用jQuery封装的ajax:
1.load()函数.
$(document).ready(function(){$("button").click(function(){$("#div1").load("/try/ajax/demo_test.txt");});
});
2.get()函数.
$(document).ready(function(){$("button").click(function(){$.get("/try/ajax/demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);});});
});
3.ajax.
$.ajax({type : "post",url : "checkpwd.do",data : "password=" + document.getElementById("password").value,async : false,success : function(data){if(data == "true") state=1;}});
表单onsubmit事件无效以及表单onsubmit使用ajax无效解决相关推荐
- js form表单onsubmit事件用法详解
onsubmit事件是当表单提交时进行相关js操作的一个事件.(但是有疑问) onsubmit 事件会在表单中的确认按钮被点击时发生.当该事件触发的函数中返回false时,表单就不会被提交. 请看下面 ...
- form.submit 方法 并不会触发 form.onsubmit 事件
做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body><div class="cont ...
- onsubmit 事件
onsubmit 事件 Event 对象 定义和用法 onsubmit 事件会在表单中的确认按钮被点击时发生. 语法 οnsubmit="SomeJavaScriptCode" 参 ...
- 关于onsubmit事件return的使用
onsubmit事件支持所有浏览器. onsubmit事件支持且仅支持form标签. 按正常的理解来说,该事件是发生在submit事件触发,但是执行action之前这中间.但是它的使用上有一个小坑. ...
- 前端:JS/32/form对象(表单)(form对象的属性,方法和事件),受返回值影响的两个事件(onclick事件,onsubmit事件),获取表单的元素对象的三种方式,表单的提交和验证方法总结
form 对象(表单) 一个<form>标记,就是一个<form>对象: 1,form对象的属性 name :表单的名称,主要用来让JS来控制表单: action :表单的数据 ...
- 『PHP学习笔记』系列九:利用from表单的onSubmit事件进行浏览器端的数据验证
数据验证思路: 当我们在网站进行注册时,一般有两个数据验证的过程,一个是在服务器端的验证,一个是在浏览器端的验证.浏览器端的验证一般是用来验证提交的信息是否符合注册的要求,即数据是否合法:服务器端的验 ...
- 4、阻止表单onsubmit事件的默认行为
1.阻止事件的默认行为 1.1 通过return false; 1.2 通过event.preventDefault(); 2.阻止a标签的点击的默认行为 1.1 通过return false; &l ...
- php onsubmit方法,表单元素的submit()方法和onsubmit事件应用概述
表单元素拥有submit方法,同时也具有onsubmit事件句柄,用于监听表单提交.可以使用elemForm.submit();方法触发表单提交. 1.表单元素中出现了name="submi ...
- 【onsubmit】Form表单onsubmit事件用法详解
表单提交数据时,我们有时会用到onsubmit事件,那么onsubmit事件到底是干什么用的,在什么时候触发onsubmit事件以及如何使用onsubmit.本文章将向大家详细讲解onsubmit事件 ...
最新文章
- 验证回文串Python解法
- 文本”Hello, world.”显示的颜色是?
- CVE-2017-8046(Spring Data Rest RCE)
- Dedecms v5.7 CKEditor编辑器回车键换行改为分段
- IPv6 to IPv4过渡技术——6to4隧道配置实例
- echart 地图 某个地区_「省份」Echart系列 | 绘制世界地图含中国各个省份(地图篇)(一) - seo实验室...
- 如何读代码?读代码的利器---FreeMind
- 2020-2023保时捷Taycan维修手册电路图技术培训手册用户手册电动汽车技术资料
- delphi 之 override overload
- PS快捷键总结,(操作、设置)小技巧
- Android Studio gradle 自定义签名设置
- 大话数据结构 code 第四章 04斐波那契函数_Fibonacci
- 数据聚合与分组操作(数据分析)
- 社区英雄榜:谁是真正的技术英雄?
- 如何跳过b站的充电鸣谢?
- MobaXterm登录密码重置
- 人工智能与大数据行业的兴起,主要产生了哪些新的职位?
- AUTOCAD——图层线型
- 用DOS命令打开IE浏览器、我的文档等等
- [转] 我应该早看的 狂后悔啊 200条装修小常识 [图片]