ajax登录

zoekitty

于 2016-08-24 20:17:41 发布

阅读量211

点赞数

本文链接：https://blog.csdn.net/zoekitty/article/details/52303668

版权

<!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>

zoekitty

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax登录

function ajax(callback,data) { //创建ajax对象 //未优化的 var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject() var xhr = new (window.XMLHttpRequest ? XMLHttpR
复制链接

扫一扫