Ajax的写法

经典ajax写法 注:console.log 用于输出普通信息

<script>
     var url="http://result.eolinker.com/NlLRMz6e1911deea5ab4b01704bbfe0b97948d26eb2d31d?uri=/classic/latest";   
      //上面的地址为在eolinker上创建的接口
    $.ajax({

    url,
    type:"get",
    dataType:"json",    //返回值的类型
    success:function(res){      //回调函数,请求成功之后,返回数据
        console.log(res)
    }
})
   </script>

es6返回数据的写法

  <script>
        var age = 29
        var name="xiajinhua";
        var obj = {
            name,
            age
        }
        console.log(obj.name);
    </script>

传数据的方式

 <script>
        var obj={
            url:"xxxx",
            type:"get"
        }
        var {url,type}=obj;      //如果这样写,那么{}里面的类型必须与右边的参数一致
        // console.log(url);
        // console.log(type);
        var arr=[1,23,3];
        var[a,b,c]=arr;
        console.log(b);
        </script>

<script>
        /* function test(a,b,c){
            console.log(a+b+c);
        } */
        function test({a=10,b,c}){
            console.log(a+b+c);
        }
        test({
            b:20,
            c:30
        })
        test({
            a:30,
            b:20,
            c:30
        })
    </script>

调用ajax(其中的URL皆为自行编写的接口)

<script>
        /*shift+alt+f 格式快捷键*/
        var url = "http://result.eolinker.com/NlLRMz6e1911deea5ab4b01704bbfe0b97948d26eb2d31d?uri=";
        //     $.ajax({

        //     url,
        //     type:"get",
        //     dataType:"json",
        //     success:function(res){
        //         console.log(res)
        //     }
        // })
        var baseUrl = "http://result.eolinker.com/NlLRMz6e1911deea5ab4b01704bbfe0b97948d26eb2d31d?uri=";
        function http({ url, type = "get", dataType = "json", data = {}, callback }) {
            $.ajax({
                url: baseUrl + url,
                type,
                dataType,
                data,
                success: function (res) {
                    callback(res);
                }
            })
        }
        http({
            url: "name",
            callback: function (res) {
                console.log(res);
            }
        });
        http({
            url: "/classic/latest",
            callback(res) {
                console.log(res);
            }
        })
    </script>

封装一个ajax,使用时调用即可

image.png

然后将封装的ajax写入其中

var baseUrl = "http://result.eolinker.com/NlLRMz6e1911deea5ab4b01704bbfe0b97948d26eb2d31d?uri=";

function http({ url, type = "get", dataType = "json", data = {}, success }) {
    $.ajax({
        url: baseUrl + url,
        type,
        dataType,
        data,
        success: function (res) {

            success(res);
        }
    })
}

引入外部js,需要引包,直接访问网址复制链接即可

https://www.bootcdn.cn

image.png
image.png

注:引入的外部包一定要写在引入的js上面,引用代码如下:

 <script>
        http({
            url: "name",
            success: res => {    //=>这个是ES6的箭头函数,可以理解为function(res)
                console.log(res);
            }
        })
        http({
            url: "/classic/latest",
            success(res) {
                console.log(res);
            }
        })
    </script>