<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="uname" placeholder="用户名" />
<input type="password" id="upwd" placeholder="密码"/>
<input type="button" id="btn" value="登录" />
<script>
function ajax(callback,data) {
//创建ajax对象
//未优化的 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject()
var xhr = new (window.XMLHttpRequest ? XMLHttpRequest: ActiveXObject)();
//new实例化对象时如果不需要传参数也可以不写小括号
//打开url
xhr.open('post','05.php',true);
//post请求需要添加头信息
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//发送数据
xhr.send(data);
//监听事件
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status==200){
//获取服务器返回的数据
var txt = xhr.responseText;
//调用传入的参数(回调函数)并且把服务器返回的数据再交给回调函数
callback(txt);
}else{
alert('请求出错'+xhr.status);
}
}
}
}
//1.获取元素
var btn = document.getElementById('btn');
var uname = document.getElementById('uname');
var upwd = document.getElementById('upwd');
btn.οnclick=function(){
//3.获取表单里面的用户名和密码,组成数据 属性名=属性值&属性名1=属性值1
var data = 'uname='+uname.value+'&upwd='+upwd.value;
//4.调用ajax函数发送请求
ajax(function (txt) {
var json = JSON.parse(txt);
/** if(json.error){
alert(json.error);
}else{
alert('登录成功');
}**/
//alert(json.error?json.error:'登录成功');
//代码优化
alert(json.error || '登录成功');
},data)
}
</script>
</body>
</html>
下面的是后台05.php
<?php
header('Content-Type:text/html;charset=utf-8');
$userList = array(
'张三'=>'123',
'李四'=>'456',
'王麻子'=>'789'
);
//1.获取用户名与密码
$uname = isset($_POST['uname']) ? $_POST['uname'] :'';
$upwd = isset($_POST['upwd']) ? $_POST['upwd'] :'';
//异常信息
$error = '';
if(!$uname || !$upwd){
$error = '用户名或密码不能为空';
}
//3.判断用户名是否在列表中
if(isset($userList[$uname])){
if($userList[$uname]!==$upwd){
$error = '密码错误!';
}
}else{
$error = '用户名不存在!';
}
//4.返回登录信息
echo json_encode(
array('error'=>$error)
);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.box{
width: 300px;
padding: 10px;
margin: 0 auto;
background: pink;
}
.box img{
width: 100px;
height: 100px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
</style>
<body>
<button id="btn">获取老宋的数据</button>
<div class="box">
<img src="thumb/xiaobao.jpg" id="info">
姓名:<span id="uname" ></span><br><br>
年龄:<span id="age" ></span><br><br>
详细:<p id="detail" ></p><br><br>
</div>
</body>
<script>
//1.获取按钮及span等元素
var btn = document.getElementById('btn');
var info = document.getElementById('info');
var uname = document.getElementById('uname');
var age = document.getElementById('age');
var detail = document.getElementById('detail');
//2.自定义函数装ajax
function ajax(callback) {
//创建ajax对象
//未优化的 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject()
var xhr = new (window.XMLHttpRequest ? XMLHttpRequest: ActiveXObject)();
//new实例化对象时如果不需要传参数也可以不写小括号
//打开url
xhr.open('get','04.php',true);
//发送数据
xhr.send();
//监听事件
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status==200){
//获取服务器返回的数据
var txt = xhr.responseText;
//调用传入的参数(回调函数)并且把服务器返回的数据再交给回调函数
callback(txt);
}else{
alert('请求出错'+xhr.status);
}
}
}
}
//3.单击获取数据
btn.onclick = function () {
//4.调用ajax函数 并且把匿名函数当参数传递过去
ajax(function (txt) {
//上面ajax执行callback(数据) ,这里面的txt第一个参数就对应数据
//5.将传递过来的数据转换成JSON格式
var data = JSON.parse(txt);
// uname age detail id thumb
//6.将获取的数据放在指定元素里面
info.src = data.thumb;
uname.innerHTML = data.uname;
age.innerHTML = data.age;
detail.innerHTML = data.detail;
});
}
</script>
</html>