欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

Ajax入门实例

程序员文章站 2022-04-05 21:07:39
...
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入门实例的详细内容，更多请关注其它相关文章！

相关标签： ajax入门，ajax入门实例

上一篇： 伪命令req功能的详细介绍

下一篇： Python和163邮箱授权码发送邮件的分析与实现（代码）

推荐阅读