美文网首页
简单封装ajax

简单封装ajax

作者: easemeng | 来源:发表于2018-11-22 21:46 被阅读0次

    1.在eolinker上创建接口

    (1)新建工作空间(第一次新建,之后是否新建视情况而定)

    新建工作空间.png

    (2)新建一个项目(第一次使用创建,之后是否创建视情况而定)

    新建项目.png 新建项目2.png

    (3)新建接口(新建一个分组,然后新建接口,之后是否新建分组视情况而定)

    建接口.png 新建接口.png

    (4)将复制好的json插入,并修改属性值()

    导入json.png
    插入json2.png
    json3.png

    2.在写好的接口中获取接口地址

    获取接口地址.png

    3.创建js文件封装ajax(地址中要去掉具体的URI)

    (1)创建一个常量接收不确定的接口对象(没有具体的URI)

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

    (2)具体的ajax方法(具体的url = 创建的常量 + 传入的url 使用回调函数输出)

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

    4.调用封装好的ajax

    (1)在head导入jQuery

    bootcdn导入.png 复制标签.png

    将复制好的标签粘贴在html文件的头部<head>标签中

    (2)导入封装好的ajax(一定要写在jQuery导入之后)

    <script src="js/http.js"></script>
    

    (3)调用ajax方法(根据url参数的不同,会获得不同的接口对象)

    http({
                url:"name",
                success:res=>{
                    console.log(res);
                }
            });
            http({
                url:"/classic/latest",
                success(res){
                    console.log(res);
                }
            })
    

    相关文章

      网友评论

          本文标题:简单封装ajax

          本文链接:https://www.haomeiwen.com/subject/ivsrqqtx.html