ajax 技术

ajax 技术

$.ajax({
    url:"",
    type:'GET',
    success:function(data){
        console.log(data);
    },
    error:function(err){
        
    }
})

$.ajax({
    url:'',
    type:'POST',
    data:{
        key:value
    },
    success:functoon(data){
    
    }
})

$(function () {
    $.ajax({
        url:'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
        type:'post',
        success:function (data) {
            console.log(data);
            var code = data.HeWeather6[0].now.cond_code; //104

            $('ul').html(`<li>
                <img src="https://cdn.heweather.com/cond_icon/${code}.png" alt="">
            </li>`)

        },
        error:function (err) {
           console.log(err);
        }
    })
})

$.ajax({
    url: "https://www.luffycity.com/api/v1/course_sub/category/list/",
    type: 'get',
    async:false,
    beforeSend:function(){
      console.log('请求还开始')
        $('p').show(300);
    },
    dataType:'json',
    success: function (res) {
          $('p').hide(300);
        // console.log(res);
        var categorys = res.data;

        let catrgory = {
            "id": 0,
            "name": "全部",
            "category": 0
        };

        categorys.unshift(catrgory);
         console.log(categorys)
    }
})

发送post 请求

// 发送 post
$.post(url, {'data':123}, function (res) {
    // 回调函数
    console.log(res.data);
}, 'json');

原生jsXHR对象

1.创建对象 var xhr = new XMLHttpRequest();

2.连接 xhr.open('GET',url,true)

3.发送数据 xhr.send()

4.回调 xhr.onreadystatechange = fn

​ xhr.readyState

。0-为初始化：对象已经建立，单位初始化，open方法还未调用；

。1-初始化：对象已经建立，但还未调用send方法发送请求；

。2-发送数据：send方法已调用，但HTTP头未知；

。3-数据传输中：已经接受部分数据，但响应不完全；

。4-完成：数据接受完成，此时才可以获取完整的返回数据

和风天气

$(function () {
    function getWeather() {
        $.ajax({
            url: 'https://free-api.heweather.com/s6/weather/now?location=beijing&key=4693ff5ea653469f8bb0c29638035976',
            type: 'post',
            success: function (data) {
                console.log(data);
                var code = data.HeWeather6[0].now.cond_code; //104

                $('ul').html(`<li>
                <img src="https://cdn.heweather.com/cond_icon/${code}.png" alt="">
            </li>`)

            },
            error: function (err) {
                console.log(err);
            }
        })
    }
    getWeather();

    setInterval(function () {
        getWeather();
    },1000*3);

})