AJAX数据传输原生js

原生ajax写法
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form>
        <p>
            <label for="">账户：</label>
            <input name="username" type="text">
        </p>
        <p>
            <label for="">密码：</label>
            <input name="password" type="password">
        </p>
        <p>
            <button id="login" type="button">登录</button>
        </p>
    </form>
    <script>
        //查找元素
        var oLogin = document.getElementById(‘login‘);
        //事件
        oLogin.onclick = function () {
            //提取value值
            var username = document.querySelector(‘input[name=username]‘).value;
            var password = document.querySelector(‘input[name=password]‘).value;
           // console.log(username,password)
            //ajax
            var ajax = new XMLHttpRequest;
            ajax.open(‘POST‘,‘/user/login‘,true);
            //ajax.open(‘get‘,‘/user/list?pagesize=5&pageindex=1‘,true);
            //设置头部
            ajax.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘)
            //username=moz&password=123
            ajax.send(‘username=‘ + username + ‘&password=‘ + password);
            //响应/回调函数
            ajax.onreadystatechange = function () {
                if(ajax.readyState==4){
                    var res=JSON.parse(ajax.responseText);
                    console.log(res);
                    if(res.status){
                        location.href=‘http://www.baidu.com‘;
                    }
                    else{
                        alert(res.msg);
                    }                  
                }
            }
        }

    </script>
    <script>
　　//异步传输
   // console.log(1)
   // setTimeout(function(){
   //     console.log(2)
   // },0)
   // console.log(3);
    </script>
</body>

</html>
AJAX数据传输原生js

相关文章
