文档章节

表单onsubmit事件无效以及表单onsubmit使用ajax无效解决

阮少爷
 阮少爷
发布于 2017/04/03 12:51
字数 922
阅读 256
收藏 0

今天在做登陆页面,想法是这样的:

    前台提交表单给后台,如果用户名密码不正确,就提示用户用户名密码不对,并不跳转,也不重定向,而当用户名和密码输入正确的时候,跳转到登陆之后的页面。

 

这个过程需要用到的技术主要就是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;
		          }
		     });

 

© 著作权归作者所有

阮少爷
粉丝 8
博文 174
码字总数 124470
作品 0
成都
CTO(技术副总裁)
私信 提问
表单的onsubmit和onclick事件

1.执行顺序:点击按钮(type为submit的按钮)---> onclick ----> onsubmit ----> 表单提交,刷新页面 2.阻止事件(分两种): a. 采用这种绑定时: <form onsubmit="bc()" action="123"> <but......

hezhongjie
2018/03/07
48
0
DWZ表单提交及关闭当前页面并刷新数据

在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应的处理 注意: DWZ框架默...

一念三千
2013/03/21
31.9K
6
【转】表单提交及关闭当前页面并刷新数据

在DWZ文档中,对于DWZ框架Ajax无刷新表单提交处理流程描述如下: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应的处理 注意: DWZ框架默...

感觉太煽情
2014/11/19
2.5K
0
Javascitp事件绑定方式之差异

关于javascript事件绑定的资料网上已有很多,这里总结自己使用过程中遇到的问题及得出的想法。 事件绑定的方式 1. 在DOM中直接绑定,如onlick=”function(){}” 2. DOM对象属性绑定,如obj.o...

欧阳小瓜
2013/07/09
256
0
jQuery EasyUI API 中文文档 - 表单(Form)

Form 表单 用法 1. 2. ... 3. 使 form 成为 ajax 提交的 form 。 1. $('#ff').form({ 2. url:..., 3. onSubmit: function(){ 4. // 做某些检查 5. // 返回 false 来阻止提交 6. }, 7. succe......

tinwai
2012/03/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

iptables删除命令中的相关问题

最近在做一个中间件的配置工作,在配置iptables的时候,当用户想删除EIP(即释放当前连接),发现使用iptables的相关命令会提示错误。iptables: Bad rule (does a matching rule exist in t...

xiangyunyan
32分钟前
2
0
IT兄弟连 HTML5教程 HTML5表单 新增的表单属性1

HTML5 Input表单为<form>和<input>标签添加了几个新属性,属性如表1。 1 autocomplete属性 autocomplete属性规定form或input域应该拥有自动完成功能,当用户在自动完成域中开始输入时,浏览器...

老码农的一亩三分地
今天
7
0
OSChina 周五乱弹 —— 葛优理论+1

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @这次装个文艺青年吧 :#今日歌曲推荐# 分享米津玄師的单曲《LOSER》: mv中的舞蹈诡异却又美丽,如此随性怕是难再跳出第二次…… 《LOSER》-...

小小编辑
今天
1K
19
nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部