zoukankan      html  css  js  c++  java
  • Ajax -post 请求


    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>AJAX发送POST请求</title>
    <style>
    #loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #555;
    opacity: .5;
    text-align: center;
    line-height: 300px;
    }

    #loading::after {
    content: '加载中...';
    color : #fff;
    }
    </style>
    </head>
    <body>
    <div id="loading"></div>
    <table border="1">
    <tr>
    <td>用户名</td>
    <td><input type="text" id="username"></td>
    </tr>
    <tr>
    <td>密码</td>
    <td><input type="password" id="password"></td>
    </tr>
    <tr>
    <td></td>
    <td><button id="btn">登录</button></td>
    </tr>
    </table>
    <script>

    // 找一个合适的时机,做一件合适的事情
    var btn = document.getElementById('btn');
    // 1. 获取界面上的元素 value
    var txtUsername = document.getElementById('username');
    var txtPassword = document.getElementById('password');
    var loading = document.getElementById('loading');

    btn.onclick = function () {
    loading.style.display = 'block';
    var username = txtUsername.value;
    var password = txtPassword.value;
    // 2. 通过 XHR 发送一个 POST 请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'login.php');
    // !!! 一定注意 如果请求体是 urlencoded 格式 必须设置这个请求头 !!!
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    // xhr.send('username=' + username + '&password=' + password)
    xhr.send(`username=${username}&password=${password}`);
    // 3. 根据服务端的反馈 作出界面提示
    xhr.onreadystatechange = function () {
    if (this.readyState !== 4) return;
    console.log(this.responseText);
    loading.style.display = 'none'
    }
    }

    </script>
    </body>
    </html>
  • 相关阅读:
    linux查询php.ini位置
    laravel打印完整SQL语句
    python识别图片中的文字
    python -使用pytesseract识别文字时遇到的问题
    python弹出选择文件的弹出窗获取文件方法
    python将字符串中多个空格换为一个空格
    python生成word文档
    linux下tar命令
    python使用xpath获取内容
    正则表达式匹配空行
  • 原文地址:https://www.cnblogs.com/lujieting/p/10291259.html
Copyright © 2011-2022 走看看