领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

在浏览器中使用访问API接口提交POST数据

nixiaole 2025-05-24 15:56:29 知识剖析 2 ℃

最近,在开发时,有时需要调用API接口,提交Post数据,但是又不想打开象VS或微信开发者工具,去查看请求接口后,返回的数据。同时也不想用类似Postman这样的软件去调用接口。
那怎么办呢?
使用场景:
当我们想快速的访问某个POST接口,我们可以通过浏览器 创建XMLhttpRequest对象,去提交请求,直接在浏览器得到返回的结果。
具体的代码如下:
var url = "
https://storesc.xxx.com/api/address/GetAddressByAddressId";

var params = {addressid:1};
var xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(JSON.stringify(params));

注意其中xhr.open(“POST”,url,true),表示了使用POST请求,而xhr.send(JSON.stringify(params));表示把请求发出去。只要把上面的代码复制到GOGLE浏览器的Console控制台,运行,就可以看到请求的结果,如下图:


注意,十分重要,一定要先访问这个请求的域,可以先在GOOGLE浏览器中访问一下,再请求上面的接口,如果不这样做,会出现跨域的出错提示:

至此,我们完成了通过GOOGLE浏览器请求POST接口的方法;
这里我们就先不考虑接口认证,等情况了。如果对你有用,请点点赞,谢谢啦。

最近发表
标签列表