ajax请求的原生和jquery请求

ajax原生请求发送:

get请求:
//发送请求
//1. 创建ajax引擎对象
let ajax = new XMLHttpRequest();
//2. 创建get请求
ajax.open("get",`./data.json?user=${ userVal }&pwd=${ pwdVal }`);
//3. 监听:在适当的时候接受响应数据
ajax.onreadystatechange = function(){
    //当ajax请求状态码等于4  并且 http响应状态码等于200
    if(ajax.readyState === 4 && ajax.status === 200){
        //接受参数 -- 对象
        let jsonData = JSON.parse(ajax.responseText);
        //输出数据
        console.log(jsonData);
    }
}
//4. 发送请求
ajax.send();
-----------------------------------------------------------
post请求:

//发送post请求
//1. 创建ajax引擎对象
let ajax = new XMLHttpRequest();

//2. 创建post请求
ajax.open("post","./user.json");

//3. 监听(在适当的时候接受响应数据)
ajax.onreadystatechange = function(){
    //当ajax请求状态码等于4 并且 http响应状态码等于200
    if(ajax.readyState === 4 && ajax.status === 200){
        //接受响应数据
        console.log( ajax.responseText );
    }
}
//4. 设置请求头
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

//5. 发送请求
ajax.send(`user=${ userVal }&pwd=${ pwdVal }`);

jQuery发送ajax请求(回调函数后面可接接收数据格式如:‘json’…):

//发送post请求 -- 没有带参数
$.post("./user.json",function (data) {
    //接收响应数据
    console.log( data );
});


//发送post请求 -- 参数(字符串)
$.post("./user.json","code=0&userData=123",function (data) {
    //接收响应数据
    console.log( data );
});


//发送post请求 -- 参数(字符串)
$.post("./user.json",{ name : "gege", age:34},function (data) {
    //接收响应数据
    console.log( data );
});
------------------------------------------------------------------
//发送get请求 -- 没有带参数
$.get("./user.json",function(userData){
    //接收响应数据
    console.log( userData );
});

//发送get请求 -- 参数(字符串)
$.get("./user.json","name=zhangsan&age=90",function(userData){
    //接收响应数据
    console.log( userData );
});


//发送get请求 -- 参数(对象)
$.get("./user.json",{ name:"lisi",age:12},function(userData){
    //接收响应数据
    console.log( userData );
});


//发送get请求 -- 参数(地址栏后面字符串)
$.get("./user.json?name=wangwu&age=67",function(userData){
    //接收响应数据
    console.log( userData );

    console.log( JSON.stringify(userData))
});
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值