AJAX---发送POST请求

发送POST请求

 

POST 请求过程中，都是采用请求体承载需要提交的数据

 var xhr = new XMLHttpRequest()

 

    // open 方法的第一个参数的作用就是设置请求的 method
    xhr.open('POST', './add.php')

 

    // 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded
    // 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据
    xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')

 

    // 需要提交到服务端的数据可以通过 send 方法的参数传递
    // 格式：key1=value1&key2=value2
    xhr.send('key1=value1&key2=value2')

 

xhr.onreadystatechange = function () {
      if (this.readyState === 4) {
        console.log(this.responseText)
      }
    }

 

练习代码

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

 

posted @ 2020-02-06 21:48  jane_panyiyun  阅读(1099)  评论(0)  编辑  收藏  举报