首页 前端知识 xhr如何发起请求

xhr如何发起请求

2024-05-06 09:05:20 前端知识 前端哥 509 962 我要收藏

首先引入axios,项目比较小没必要使用脚手架,所以使用cdn的方式引入axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

发起请求

var data = {
	subscribeEmail: 'userEmail',
    subscriber: 'userName'
}
var url = "请求地址";
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);   //请求方式  ,请求地址 ,true表示异步
xhr.setRequestHeader("Content-type", "application/json");
xhr.send(JSON.stringify(data));  //改了这里
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(JSON.parse(xhr.responseText));//输入相应的内容
    }
}

可以精简为一下代码

//执行Post请求
axios({
        url: '请求地址',
        method: 'post',
        data:{}
    }).then(function (response) {
		console.log(response.data.data)		
    }).catch(function (err) {
        console.log(err)
    });

//执行get请求
axios({
        url:'请求地址?id=123'
        method:'get'
    }).then(function(response) {
        console.log(response.data.data)
    }).catch(function (err) {
        console.log(err)
    });

axios({
        url:'请求地址',
        method:'get',
        params: {
            ID: 123
        }
    }).then(response=> {
        console.log(response) 
    }) .catch(error=> { 
        console.log(error)
    });

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7188.html
标签
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!