AJAX-POST

最新推荐文章于 2025-09-11 13:32:54 发布

原创最新推荐文章于 2025-09-11 13:32:54 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #post

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

AJAX

3 篇文章

订阅专栏

本文详细介绍了使用AJAX发起POST请求的过程，包括如何创建xhr对象，设置请求方式为POST，设置请求头，发送请求数据，并处理服务器响应。通过具体代码示例展示了完整的POST请求流程。

AJAX-POST

POST

POST

数据不会出现在地址栏中
长度取决于服务器

post.php

<?php
	//输出post请求
	echo $_POST['age'];
	echo "你好啊"
?>

post.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <button id="btn">点我</button>
</body>
<script>
    window.onload = function(){
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            var xhr;
            // 1、建立一个 xhr 对象
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject();
            }
            // 打开一个服务器连接
            xhr.open("POST","./post.php",true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

            // 3、发送请求
            xhr.send("age=88");
            // 4、检测
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4&&xhr.status==200){
                    console.log(xhr.responseText);
                }
            }
        }
    }
</script>
</html>