jquery05-ajax在jquery中的应用

一,$.ajax({})的用法
常用
url:"http://...",接口链接
type:"post",请求类型
data:{       传入参数
 type: 'boutique',
  pageNum: '1',
}
contentType: "application/json",规定内容格式
请求成功的回调函数
success:function(res){},
请求失败的回调函数
error:function(){}
补充:
beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话)
dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据(可能是处理过的)传递给success回调函数。
success 当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数,无论成功或失败。传入XMLHttpRequest对象,以及一个包含成功或错误代码的字符串

    $.ajax({
        url: 'http://59.111.104.104:8086/weChat/applet/course/list/type',
        type: 'post',
        data: {
            type: 'boutique',
            pageNum: '1',
            pageSize: "29",
        },
        success: function (res) {
            // console.log($(".p1").find(".mianF3"))
            for (var i = 0; i < $(".p1").find(".mianF3").length; i++) {
                $(".p1").find(".mianF3").find("img").eq(i).attr("src", res.rows[i].bannerFileUrl)
                $(".p1").find(".mianF3").find("img").parent().next().eq(i).html(res.rows[i].courseTitle)
                $(".p1").find(".mianF3").find("img").parent().next().next().eq(i).html("共" + res.rows[i].subSectionNum + "节课|" + res.rows[i].participationsCount + "人报名")
                $(".p1").find(".jia").eq(i).html("¥" + res.rows[i].discountPrice)
                $(".p1").find(".jia").next().eq(i).html("¥<s>" + res.rows[i].coursePrice + "</s>")
            }
        }
    })

二,$post()
post传入第一个参数是接口链接,字符串格式
第二个传入参数{"type": 'boutique', "pageNum": 1,}
第三个回调函数,正常是请求成功的回调函数
$.post("http://59.111.104.104:8086/weChat/applet/course/list/type", { "type": 'boutique', "pageNum": 1, "pageSize": 5}, function (data) {
        // console.log(data.rows)
        for(var i=0;i<$('.jingpin_sourse_img').length;i++){
            $('.jingpin_sourse_img').eq(i).attr('src',data.rows[i].bannerFileUrl)
            $('.jingpin_in_cont_line_tit').eq(i).html(data.rows[i].courseTitle)
            $('.jingpin_in_cont_line_data').eq(i).html('共'+data.rows[i].subSectionNum+'节课|'+data.rows[i].participationsCount+'报名')
            $('.jingpin_in_cont_line_newprice').eq(i).html('¥'+data.rows[i].discountPrice)
            $('.jingpin_in_cont_line_price').eq(i).html('¥'+data.rows[i].coursePrice)
        }
    })

三,$get()
get传入第一个参数是接口链接,字符串格式
第二个参数用来传入参数
第三个是回调函数,正常是请求成功的回调函数

 

posted @ 2020-08-04 16:47  帅气如我66  阅读(28)  评论(0)    收藏  举报