Ajax入门实例

无忌哥哥 原创: 2018-06-29 14:53:47 812浏览

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('button')[0]
btn.onclick = function () {
//获取用户提交的数据
var email = document.getElementById('email').value
var password = document.getElementById('password').value
//将用户数据组装成查询字符串
var data = 'email='+email+'&password='+password
//1.创建xhr对象
var xhr = new XMLHttpRequest()
//2.事件监听
xhr.onreadystatechange = function (){
//5.设置回调函数
if (xhr.readyState == 4 && xhr.status == 200) {
//dom操作
var tips = document.getElementById('tips')
if (xhr.responseText == '1') {
tips.innerHTML = '登录成功,正在跳转中...'
setTimeout(function(){
location.href = 'api/index.php'
},2000)
} else {
tips.innerHTML = '邮箱或密码错误,请重新输入'
document.getElementById('email').focus()
setTimeout("tips.innerHTML = ''",2000)
}
}
}
//3.建立连接
xhr.open('POST','api/user.php?m=login',true)
//4.发送数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(data)
return false  //禁止原按钮的提交行为
}
</script>

以上就是Ajax入门实例的详细内容，更多请关注php中文网其它相关文章！

ajax入门，ajax入门实例 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

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