Ajax 시작하기 예

无忌哥哥원래의: 2018-06-29 14:53:471205검색

Ajax 시작하기 예

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax入门</title>
</head>
<body>
<form action="api/check.php" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email">
</p>
<p>
<label for="password">邮箱:</label>
<input type="password" name="password" id="password">
</p>
<p><button>登录</button>
<span id="tips" style="font-size:1.2em;font-weight: bolder;color:red"></span></p>
<!-- 取消原生提交动作 -->
<!-- <p><button type="button">登录</button></p> -->
</fieldset>
</form>
</body>
</html>
<script type="text/javascript">
var btn = document.getElementsByTagName(&#39;button&#39;)[0]
btn.onclick = function () {
//获取用户提交的数据
var email = document.getElementById(&#39;email&#39;).value
var password = document.getElementById(&#39;password&#39;).value
//将用户数据组装成查询字符串
var data = &#39;email=&#39;+email+&#39;&password=&#39;+password
//1.创建xhr对象
var xhr = new XMLHttpRequest()
//2.事件监听
xhr.onreadystatechange = function (){
//5.设置回调函数
if (xhr.readyState == 4 && xhr.status == 200) {
//dom操作
var tips = document.getElementById(&#39;tips&#39;)
if (xhr.responseText == &#39;1&#39;) {
tips.innerHTML = &#39;登录成功,正在跳转中...&#39;
setTimeout(function(){
location.href = &#39;api/index.php&#39;
},2000)
} else {
tips.innerHTML = &#39;邮箱或密码错误,请重新输入&#39;
document.getElementById(&#39;email&#39;).focus()
setTimeout("tips.innerHTML = &#39;&#39;",2000)
}
}
}
//3.建立连接
xhr.open(&#39;POST&#39;,&#39;api/user.php?m=login&#39;,true)
//4.发送数据
xhr.setRequestHeader(&#39;Content-Type&#39;,&#39;application/x-www-form-urlencoded&#39;)
xhr.send(data)
return false  //禁止原按钮的提交行为
}
</script>

위 내용은 Ajax 시작하기 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：Vue는 이미지를 자르고 서버에 업로드하는 기능을 구현합니다.다음 기사：Vue는 이미지를 자르고 서버에 업로드하는 기능을 구현합니다.