AJAX教程系列三：get与post区别_onload post与get-CSDN博客

本文链接：https://blog.csdn.net/qq_19972169/article/details/51862105

一：接教程二，如下为post请求

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script>
    window.onload = function() {

        var oBtn = document.getElementById('btn');  

        oBtn.onclick = function() {
            var xhr = null;
            // 打开浏览器
            try {
                xhr = new XMLHttpRequest();
            } catch (e) {
                xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }

        xhr.open('post','2.php',true);
            //post，数据放在send()里面作为参数传递求.申明发送的数据类型 
            // 无缓存 无编码问题
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send('username=小薇&pwd=30');

            // 等待服务器返回内容
            xhr.onreadystatechange = function() {

                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        alert(xhr.responseText);
                    }else {
                        alert("错误"+xhr.status); 
                    }

                }   
            } 

        }
    }
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
</body>
</html>

二：2.php 如下

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_POST['username'];
$pwd = $_POST['pwd'];

echo "账号：{$username}，密码：{$pwd}";