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>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/xiazai/js/6335">
<img src="https://img.php.cn/upload/jscode/000/287/557/608a08aa69c44552.jpg" alt="echarts销售收入图表实例">
</a>
<div class="aritcle_card_info">
<a href="/xiazai/js/6335">echarts销售收入图表实例</a>
<p>H5基于echarts制作水平柱状季度收入图表，一年的曲线走势图表，圆形的投票率图表这3种常用的销售统计图表实例代码。</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="echarts销售收入图表实例">
<span>78</span>
</div>
</div>
<a href="/xiazai/js/6335" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="echarts销售收入图表实例">
</a>
</div>
-->
</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中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
292
