Rumah > Artikel > hujung hadapan web > Ajax入门实例

Ajax入门实例

无忌哥哥asal: 2018-06-29 14:53:471214semak imbas

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>

Atas ialah kandungan terperinci Ajax入门实例. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：vue 实现剪裁图片并上传服务器的功能介绍Artikel seterusnya：Vue 实现双向绑定的方法

Artikel berkaitan

Lihat lagi