前端发送请求的方法总结

最新推荐文章于 2025-10-04 23:02:37 发布

原创最新推荐文章于 2025-10-04 23:02:37 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue #ajax #post

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文总结了前端发送请求的几种方法，包括原生的Ajax GET和POST请求，jQuery的Ajax使用，以及Vue中流行的Axios库。Axios是一个基于Promise的HTTP库，适用于浏览器和Node.js，它具有拦截请求和响应、转换数据、取消请求等特性，并且在浏览器端支持防止CSRF攻击。

1 )原生的ajax

get请求

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

post请求

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('POST ',url,true);
    oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    oAjax.send('fname=Bill&lname=Gates');
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

jquery 发送ajax请求

 $.ajax({
            //请求方式
            type : "POST",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求头
            headers：{
            }，
            //请求地址
            url : "http://127.0.0.1/admin/list/",
            //数据，json字符串
            data : JSON.stringify(list),
            //请求成功
            success : function(result) {
                console.log(result);
            },
            //请求失败，包含具体的错误信息
            error : function(e){
                console.log(e.status);
                console.log(e.responseText);
            }
        });

vue axios

axios是基于promise可以用于浏览器和node.js的http客户端

支持浏览器和node.js
支持promise
能拦截请求和响应
能转换请求和响应数据
能取消请求
自动转换JSON数据
浏览器端支持防止CSRF(跨站请求伪造)

// 发起一个POST请求
axios({
method: ‘post’,
url: ‘/user/12345’,
data: {
firstName: ‘Fred’,
lastName: ‘Flintstone’
}
}).then(data=>{console.log(data)});

具体用法[添加链接描述](https://www.kancloud.cn/yunye/axios/234845)