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>
  • 相关阅读:
    PHP中常用的字符串格式化函数总结
    php格式化金额函数分享
    PHP获取当前日期和时间及格式化方法参数
    CSS 中如何把 Span 标签设置为固定宽度
    css中 Span 元素的 width 属性无效果原因及多种解决方案
    js网页如何获取手机屏幕宽度
    HTML meta viewport属性详细说明
    Android onLowMemory()和onTrimMemory()
    Qt 拷贝文件目录
    QT5.1 调用https
  • 原文地址:https://www.cnblogs.com/lujieting/p/10291259.html
Copyright © 2011-2022 走看看