JS接口请求的写法(原生post与get请求、http请求等）

最新推荐文章于 2024-07-22 20:13:58 发布

尔嵘

最新推荐文章于 2024-07-22 20:13:58 发布

阅读量2.2w

点赞数 10

分类专栏： AJAX 文章标签：前端 css3 css

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.csdn.net/XU441520/article/details/101430551

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

接口的请求一般是比较固定的：主要考虑什么样的请求方式，url,需不需要传递参数等问题，这是你在写请求代码之前应该考虑的东西。但是因为js语法的不一样以及个人习惯不一样，会因人而异的产生差别。

XMLHttpRequest() 这个对象可以在不重新加载页面的情况下从后台获取数据，支持的浏览器有IE7+、Firefox、Chrome、Safari 以及 Opera。onreadystatechange事件当readyState的值发生改变时触发此事件。

open() 这个方法有三个参数，open("提交方式 get/post","资源的地址",异步或者同步 true/false);

原生get如下:

var obj = { menu: 'Net'}; //要传的参数
var xhr = new XMLHttpRequest();  //这里没有考虑IE浏览器，如果需要择if判断加
xhr.open('GET', "接口",true);
xhr.send(JSON.stringify(obj));//这里要是没有参数传，就写null
xhr.onreadystatechange = function () {
    if (xhr.status === 200 && xhr.readyState === 4) {
        //js处理数据
    
    }
}

原生post如下：

var xmlHttp = new XMLHttpRequest;
xmlHttp.open('POST', 'http://192.168.0.109:80/dingding/hook/vbn');
xmlHttp.setRequestHeader('content-type', 'application/json');
xmlHttp.setRequestHeader('token', '701558c38f34c3e08e0ab305c84ecy0b');
let obj = {
	content: JSON.stringify(jsonObj),
	prjId: localStorage.getItem('prjId'),
	creator: localStorage.getItem('creator'),
	configName: name.split('.')[0]
}
var stringData = JSON.stringify(obj);
xmlHttp.send(stringData);
xmlHttp.onreadystatechange = function() {
//complete
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
	mxUtils.confirm(mxResources.get('saveSuccess'), true);
} else {
	//请求失败的回调函数
    console.log('保存失败');
	}
}

vue中封装好的http的get请求：

export function checkGwsnAndPassword(parameter) {
    return axios({
        url: api.checkGwsnAndPassword,
        method: 'get',
        params: parameter
    })
}

http的post请求：

//this.$http为封装的挂在全局的
_this.$http.post('/state/frong/ready.do', {
    params: {
        gwn: _this.gwn,
        times: data.time,
        time_zone:"UTC+08:00"
    }
}).then((res) => {
        console.log(res);
}

//或者
export function getAllDeviceList(parameter) {
    return axios({
        url: api.getAllDeviceList,
        method: "post",
        data: parameter
    })
}