JQuery发送AJAX

JQuery发送AJAX请求

GET请求

$("button").eq(0).click(function(){
            $.get("http://127.0.0.1:8000/jquery-server", {a:100,b:200},function(data){
                console.log(data);
            },'json');
        });

POST请求

$("button").eq(1).click(function(){
            $.post("http://127.0.0.1:8000/jquery-server", {a:100,b:200},function(data){
                console.log(data);
            });
        });

服务器后端设置：

app.all('/jquery-server',(request, response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    const data = {name: '尚硅谷'};
    response.send(JSON.stringify(data));
});

通用型方法AJAX

$("button").eq(2).click(function(){
            $.ajax({
                //url
                url:'http://127.0.0.1:8000/jquery-server',
                //参数
                data:{a:100,b:200},
                //请求类型
                type:'GET',
                //响应体结果
                dataType:'json',
                //成功的回调
                success:function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error:function(){
                    console.log("出错啦！");
                },
                //头信息
                headers:{
                    c:300,
                    d:400
                }
            });
        });

Axios发送Ajax请求

GET请求

btns[0].onclick = function(){
            //GET请求
            axios.get("/axios-server",{
                //url参数
                params:{
                    id:100,
                    vip:7,
                },
                //请求头信息
                headers: {
                    name:'atguigu',
                    age:20
                }
            }).then(value => {
                console.log(value);
            });
        };

POST请求

btns[1].onclick = function(){
            axios.post("/axios-server",{
                username:"admin",
                password:'admin'
            },{
                //url
                params: {
                    id:200,
                    vip:9
                },
                //请求头参数
                headers: {
                    height:180,
                    weight:180,
                }
            });
        }

通用型方法AJAX

btns[2].onclick = function(){
            axios({
                //请求方法
                method:"POST",
                //url
                url:"/axios-server",
                //url参数
                params:{
                    vip:10,
                    level:30
                },
                headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    username:"admin",
                    password:"admin"
                }
            }).then(response=>{
                console.log(response);
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        };