ajax学习

最新推荐文章于 2022-11-30 19:39:58 发布

乐多

最新推荐文章于 2022-11-30 19:39:58 发布

阅读量96

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/weixin_44769592/article/details/98760789

版权

前端学习专栏收录该内容

60 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>ajax发送post请求</h2>
    <input type="button" value='post请求'>


</body>
</html>
<script>
    //获得input
    document.querySelector('input').onclick=function(){
    	//创建一个异步对象
        var xxx=new XMLHttpRequest();
        //设置请求方式 请求地址
        xxx.open('post','postdata.php');
		//创建回调
        xxx.onload=function(){
            console.log(xxx.responseText);
        }
        
        xxx.send(null);
    }
</script>

检查台发现看到了请求

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>ajax发送post请求</h2>
    <input type="button" value='post请求'>


</body>
</html>
<script>
    document.querySelector('input').onclick=function(){
        var xhr=new XMLHttpRequest();
        //设置请求行
        xhr.open('post','postdata.php');
        //设置请求头 （get请求可以忽略 post如果不发送数据可以忽略）
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        //注册回调函数
        xhr.onload=function(){
            console.log(xxx.responseText);
        }
        xhr.send("name=西兰花&friend=鸡蛋");
    }
</script>

用于打印变量

<?php
    //返回内容
    echo 'ni post';
    print_r($_POST);
?>

在这里插入图片描述

请求报文头要加上这些

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录