开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax POST请求应用

简介: Ajax POST请求应用
+关注继续查看

2. 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)  
    }
}


案例:ajax使用post请求实现登陆


image


login.php


<?php

// 接收用户提交的用户名密码
if (empty($_POST['username']) || empty($_POST['password'])) {
  // echo ;
  exit('请提交用户名和密码');
}
// 校验
$username = $_POST['username'];
$password = $_POST['password'];
if ($username === 'admin' && $password === '123') {
  exit('恭喜你');
}

exit('用户名或者密码错误');
// 响应


ajax-post.html


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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ajax GET请求应用
Ajax GET请求应用
13 0
Ajax-07:Ajax发送POST请求
Ajax-07:Ajax发送POST请求
37 0
AJAX-跨域请求
1、什么是跨域请求 浏览器均默认开启了同源策略,它指Ajax请求所在的页面和被请求的页面在域名、端口均相同才能被访问,否则会提示如下错误: XMLHttpRequest cannot load xxxxxxx is not allowed by Access-Control-Allow-Origin. 2、JSONP解决方案 2.1 JSONP原理 JSONP 不是真正的AJAX请求,是利用script的src可可以跨域的特性,动态加载一段script脚本,脚本中包含需要的信息。
1050 0
select2中的ajax请求
本地数据方式 AJAX获取数据方式 代码 本地数据方式: html的select中的option是可选的,如果不写一个空的option标签,则默认选择第一项;如果写了option标签,则默认为空,但调用的时候,最好设置placeholder属性,为了美观;AJ...
989 0
Ajax请求全局配置
摘要:   jQuery已经成为项目中最常见的js库,也是前端开发最喜欢使用的库。下面是在项目中封装了jQuery的Ajax,分享给大家。 代码: // ajax 请求参数 var ajaxSettings = function(opt) { var url = opt.
861 0
asp.net ajax检查用户名是否存在代码
原文  asp.net ajax检查用户名是否存在代码 用户注册时,我们经常需要检查用户名是否存在,本文就是实现无刷新验证用户名 打开开发环境VS 2005,新建项目(或打开现有项目),新建一个Web窗体,命名为 Default.aspx 创建 XMLHttpRequest 对象所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象。
670 0
AJAX.NET 2.0 SYS未定义 解决方法(转)
配置文件一般都会缺少  这一段, 还有就是 控件一定要紧跟在后面 具体配置如下: ......                                                                                      博客园大道至简 http://www.
607 0
AJAX.NET 2.0 SYS未定义 解决方法(转)
配置文件一般都会缺少  这一段, 还有就是 控件一定要紧跟在后面 具体配置如下: ......                                                                                      博客园大道至简 http://www.
573 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载