onsubmitイベントを使用してajaxをトリガーするときに戻り値を返す方法-PHPチュートリアル-php.cn

onsubmitイベントを使用してajaxをトリガーするときに戻り値を返す方法

WBOY

リリース： 2016-06-13 13:01:33

オリジナル

758 人が閲覧しました

onsubmit イベントを使用して ajax をトリガーするときに戻り値を返す方法
これはフォームです

<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>无标题文档</title><br />
<br />
<br />
</head><br />
<br />
<body><br />
<br />
<form action="abc.php" method="post" name="form" onSubmit="return check_form()"/><br />
用户名<input type="text" name="username" id="username" /><br />
验证码<input type="text" name="identifying_code" id="identifying_code"/><br />
<input type="submit" name="login" value="登录"><br />
</form><br />
<div id="tishi"></div><br />
<script language="javascript" src="js/xmlhttprequest.js"></script><br />
<script language="javascript" src="js/js2.js"></script><br />
</body><br />
</html><br />
<br />

ログイン後にコピー

これはxmlhttprequest.jsページです

<br />
var xmlhttp = false;<br />
if (window.XMLHttpRequest) { 									//Mozilla、Safari等浏览器<br />
	xmlhttp=new XMLHttpRequest();<br />
} <br />
else if (window.ActiveXObject) { 								//IE浏览器<br />
	try {<br />
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");<br />
	} catch (e) {<br />
		try {<br />
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");<br />
	   } catch (e) {}<br />
	}<br />
}<br />

ログイン後にコピー

これは js2.js ページでマークしたルートなので、実行プロセス全体を確認できます。

<br />
var flag;<br />
function check_form(){<br />
		<br />
		    var username=document.getElementById('username').value;<br />
			var identifying_code=document.getElementById('identifying_code').value;<br />
			url='login_chk.php?username='+username+'&identifying_code='+identifying_code;<br />
			alert('这里第1步');<br />
			xmlhttp.open('get',url,true);<br />
			alert('这里第2步');<br />
			xmlhttp.onreadystatechange = function(){<br />
				alert('这里第5步');<br />
				if(xmlhttp.readyState == 4){<br />
					alert('这里第6步');<br />
					if(xmlhttp.status == 200){<br />
						alert('这里第7步');<br />
						msg = xmlhttp.responseText;<br />
						alert('这里第8步');<br />
<br />
						if(msg==1){<br />
							document.getElementById("tishi").innerHTML="<font color='#FF0000'>输入正确正在跳转</font>";	<br />
							flag=true;<br />
<br />
						}<br />
						else{<br />
							document.getElementById("tishi").innerHTML="<font color='#FF0000'>用户名或者密码错误</font>";<br />
							flag=false;<br />
						}<br />
						alert('这里第9步');<br />
						<br />
				    }<br />
			    }<br />
				<br />
				//alert(flag);<br />
			}<br />
			xmlhttp.send(null);<br />
			alert('这里第3步');<br />
		<br />
		<br />
		if(flag==true){<br />
		alert('这里是true');<br />
		alert(flag);<br />
		return true;<br />
		}<br />
		else {<br />
		alert('这里第4步');<br />
		alert(flag);<br />
		return false;<br />
		}<br />
<br />
}	<br />

ログイン後にコピー

これはlogin_chk.phpページです

<br />
<?php<br />
if(strcmp($_GET['username'],'abcd')==0&&strcmp($_GET['identifying_code'],'abcd')==0){<br />
$msg=1;<br />
<br />
}<br />
else{<br />
	$msg=0;<br />
	}<br />
<br />
echo $msg;<br />
<br />
?><br />
<br />

ログイン後にコピー

最も重要なことは、check_form の戻り値を取得して、フォームを送信できるかどうかを判断することです。 check_form
の戻り値を取得するようにコードを変更するよう専門家に依頼する------解決策-----------------------
xmlhttp.open('get',url,true);
これは非同期通信であるため、返されたデータを受け取るコールバック関数を定義する必要があります
xmlhttp.onreadystatechange = function(){