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

为什么80%的码农都做不了架构师？>>>   

今天在做登陆页面，想法是这样的：

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

 

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

 

转载于:https://my.oschina.net/qkmc/blog/872778