AJAX和Axios

1.get请求提交参数

    1.实例化一个请求对象

    2.调用open方法,设置请求方式和请求地址

    3.设置请求完成后到回调函数

    4.调用send方法,完成请求

 get传递参数

语法: url? key = value

          url? key1 = value1&key2 = value2&key3 = value3

<script>
    // 1.实例化一个请求对象
    let xhr = new XMLHttpRequest
    // 2.调用open方法,设置请求方式和请求地址
    xhr.open('get','https://autumnfish.cn/api/joke/list?num=10')
    // 3.设置请求完成后到回调函数
    xhr.onload = function(){
        // console.log(xhr.response);

        // xhr.response是服务器响应回来的内容
        // JSON.parse方法是将响应回来的JSON对象转为普通的JS对象

        let jokes = JSON.parse(xhr.response)
        console.log(jokes);
    }
    // 4.调用send方法,完成请求
    xhr.send()
</script>

2.AJAX发送post请求

        1.实例化一个请求对象

        2.调用open方法,传递请求方法及请求地址

        3.设置请求头

        4.设置请求成功后回调函数

        5.发送请求

       get请求传递参数:直接在url地址后拼接,安全性不高

       post请求传递参数:在send()方法里传递

 <script>
        // 1.实例化一个请求对象
        let xhr = new XMLHttpRequest
        // 2.调用open方法,传递请求方法及请求地址
        xhr.open('post','https://autumnfish.cn/api/user/register')
        // 3.设置请求头
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        // 4.设置请求成功后回调函数
        xhr.onload = function() {
            // console.log(xhr.response);

            let obj = JSON.parse(xhr.response)
            console.log(obj);
        }
        // 5.发送请求
        // 请求格式 :'key= value'
        xhr.send('username=nana')
    </script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值