美文网首页
简单封装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

    原生ajax配置详解 对ajax简单封装 调用

  • 封装ajax

    简单的封装ajax 调用

  • ajax简单封装

    工作之余简单封装了ajax的请求,但是工作中还是用jquery,axios,angular内部封装好了http模块...

  • 简单封装ajax

    1.在eolinker上创建接口 (1)新建工作空间(第一次新建,之后是否新建视情况而定) (2)新建一个项目(第...

  • ajax简单封装

    ajax同源非同源 非同源:跨域 http://www.kaikeba.com:443/news/id/1 同源:...

  • Ajax总结

    今天封装了一个简单的ajax。所以顺便总结一下。 #######ajax概念 ajax:Asynchronous ...

  • ajax函数封装

    ajax函数封装 封装一个ajax

  • Ajax上

    一、封装ajax 二、调用封装好的ajax

  • ajax的封装

    前两天,我们研究了Ajax的基本原理和使用方法,那么今天我们在此基础上简单的封装一个ajax。一、ajax怎么封装...

  • ajax的简单封装

网友评论

      本文标题:简单封装ajax

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