zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    用上帝视角来看待组件的设计模式
    npm和package.json那些不为常人所知的小秘密
    四步走查智能硬件异常Case
    PorterDuffXfermode 图像混合技术在漫画APP中的应用
    发布流程进化史
    二叉搜索树的操作集
    02-线性结构1 两个有序链表序列的合并
    07-图6 旅游规划
    树的同构
    线性结构4 Pop Sequence
  • 原文地址:https://www.cnblogs.com/SallyShan/p/11492313.html
Copyright © 2011-2022 走看看