jQuery封装的ajax基础

知识点一:AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

知识点二:创建数据请求三种方法

$.ajax()方法

 $.ajax({
        // 请求的地址
        url:'https://showme.myhope365.com/api/shop/shopGoods/open/hot/list1',
        // 请求方式
        type:'post',
        // 请求参数:get方法可以不写这一项,拼接在网址后头,,,post必须写data数据,传参
        data:{
        },
//成功回调之前的返回函数。。。成功与否都会显示

 beforeSend: function(){},

        // 成功回调
        success:function(res){
            console.log(res)
        },
//成功回调函数之后返回的如果没成功也会返回此函数

complete: function(){}

//请求失败回调函数
        error:function(error){
            console.log(404)
        }
    })

$.get() 和$.post()方法

//get方法

 $.get("网址/地址",{data(可有可无)},function(data,status){

回调函数

});

案例

 $.get('url', function (res) {
       console.log(res);
        }
    )
post()方法
post方法

$.post("网址/地址", {data}, function(data,status){

     回调函数

     });

案例

    // $.post()方法  与get区别就是多了data参数
    $.post('url', { 参数: 参数值, 参数1: 参数值1 },
        function (res) {
            console.log(res);
        })

知识点三:load方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据,并把返回的数据放入被选元素中。

      // load() 方法从服务器加载数据,并把返回的数据放入被选元素中   div是被选元素
            // $(selector).load(URL,data,callback);
            // live server 插件安装  、、、换个域
            // 协议、域名、端口号只要其中一个不同,就会出现跨域现象
            // 三个参数   第一个是请求回来的内容
            // 第二个是状态
            // 第三个是实例化对象
            $("#box").load("maqiaoqiao.txt", function (responseTxt, statusTxt, xhr) {
                console.log(responseTxt);
                console.log(statusTxt);
                console.log(xhr);
            })
知识点四:JSON跨域
判断:如果协议、域名、端口号有一样不匹配,就是跨域
如果出现跨域现象就会报这种错,,普通的解决办法在VScode上安装live server,,并在运行时点击右下角的Go Live

 json对象里遍历数组 forEach for in

案例

 // 对象里的数组for循环遍历获取数组元素
    for (var i = 0; i < num.attribute.length; i++) {
        document.write(num.attribute[i]);
    }
    // forEach循环
    // 第一个形参是数组里的元素 
    // 第二个形参是数组元素的索引值
    num.attribute.forEach(function (value, index) {
        document.write(index);
        document.write(value);
    })
    // for in
    // key表示索引
    for (var key in num.attribute) {
        console.log(key)
        document.write(num.attribute[key])
    }
知识点五:跨域的解决方法
总结:解决跨域方法:1.jsonp 2.后台配置 3.设置代理
posted @ 2020-08-17 01:51  橘雎  阅读(125)  评论(0编辑  收藏  举报