MENU

基础篇["调用别人接口"]

• July 10, 2019 • Read: 414 • 经验分享阅读设置

前言:

我建了一个站长交流群,里面大多数都是学生,也对编程充满着兴趣爱好,但大多数都是想学不知如何下手,我以后会多更新一些实用简单的代码教程,慢慢提升你们的编程思想,毕竟名字就是教书先生博客,必须得教啊,啊哈哈哈,来看文章的同学可以评论区留言或者打卡!站长交流群:165107560;你们会看到网上有很多很多的接口,今天就教你们如何调用它。

代码实例:

在学习之前先带你们了解一下什么是跨域,因为这个问题你肯定会遇到!(后端语言没有影响)

什么是跨域?
要了解跨域,先要说说同源策略。同源策略是由 Netscape 公司提出的一个著名的安全策略,所有支持 JavaScript 的浏览器都会使用这个策略,什么是同源?他就是会检查访问资源的 域名,协议,端口是否相同,如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

同源策略又分为两种:
DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况,不同域名的iframe是限制互相访问的。XmlHttpRequest同源策略:禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
跨域,指的是从一个域名去请求另外一个域名的资源。即跨域名请求!跨域时,浏览器不能执行其他域名网站的脚本,是由浏览器的同源策略造成的,是浏览器施加的安全限制。

跨域的严格一点来说就是只要协议,域名,端口有任何一个的不同,就被当作是跨域。

为什么要跨域?
跨域也是一种安全策略,默认都是禁止跨域的,可以看看PHP 禁止跨域 - 限制跨域 - 不限制跨域详解

跨域解决方案:

  1. 通过jsonp跨域
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域
  10. 在服务器端允许跨域(PHP 禁止跨域 - 限制跨域 - 不限制跨域详解
    方法一:jsonp

1、使用jquery的getJSON()方法,需要注意的是,url中要添加一个参数:callback=?

var id_number = $("#idNumber").val();
var user_name = $("#staffName").val();
var url = "http://132.228.156.103:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;    
$.getJSON(url,function(data){
  if(data.result == "00"){
    console.log(data.smsg);
  }
});

2、ajax,dataType:“jsonp”,必须是get请求

var url = "http://132.228.156.103:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;
$.ajax({
  type:'GET',
  url : url,
  jsonpCallback: 'jsonCallback',
  contentType: "application/json",
  dataType:"jsonp",
  success:function(json){
    alert(json);
  }
});

以上两种方式都需要被调用方在返回json的方法中做特殊处理,如下:

$.ajax({
    url : localroot + "/v1/findDisplayData",
    type : 'POST',
    data : {
        searchDate : searchDate,
        productList : productList
    },
    success : function(data) {}

开始调用接口:

今天看到有几个群友做的有流量卡业务,要用到查快递,于是便抓了一下百世快递的接口,又进行封装了一下方便调用。已经做允许跨域请求了。

用的是jQuery的语法,所以需要引用一下jQuery文件,我这里提供一个:https://my.oioweb.cn/project/jx/js/jquery.min.js ,在头部引用一下:

<script src="https://my.oioweb.cn/project/jx/js/jquery.min.js"></script>

1.png

因为就请求一个接口,就不写外部了,直接里面写就行

<script type="text/javascript">
    $.ajax({
        type:"GET",  //请求方式分GET和POST
        url:"https://api.oioweb.cn/api/bskd.php",  //请求地址,也就是接口地址
        data:{postid:"73113244809048"},   //请求数据 post个get 写法都一样
        dataType:"JSON",  //请求的数据类型,这里返回的是json
        success:function (data) {  //success 这个是请求数据成功的意思  括号里面的data是请求的数据
            //这里可以对请求的数据进行调用,我一贯的写法就行先打印到控制台方便看数据
            console.log(data); //将请求的数据打印到控制台

        },
        error:function (res) {  //请求接口失败  一般就是接口有问题不能访问或者网课会出现
            //将错误打印到控制台
            console.log(res);
        }
    });
</script>

2.png
写到这里我们已经可以将接口请求的数据打印出来了,接着看
我们看一下给的API文档
3.png
已经给出了请求失败和请求成功参数,所以我要先判断一点数据请求成功没有,因为有些人会乱填,你如果不判断的话这就是一个很大的bug

<script type="text/javascript">
    $.ajax({
        type:"GET",  //请求方式分GET和POST
        url:"https://api.oioweb.cn/api/bskd.php",  //请求地址,也就是接口地址
        data:{postid:"73113244809048"},   //请求数据 post个get 写法都一样
        dataType:"JSON",  //请求的数据类型,这里返回的是json
        success:function (data) {  //success 这个是请求数据成功的意思  括号里面的data是请求的数据
            //这里可以对请求的数据进行调用,我一贯的写法就行先打印到控制台方便看数据
            console.log(data); //将请求的数据打印到控制台
            //判断是否请求成功
            if (data.code!==1) {
                //data已经说过了是请求的数据,data.code就是直接取值。!意思是不等,因为1是请求成功,我们判断如果不等1就是请求失败
                alert("请求失败,请检查你的订单号是否填写正确!");
            } else {
                //else的意思就是否则 ,这里说明code的值是1  也就是请求成功
                //向页面把数据呈现出来
                var kddata = []; //声明一个空变量  储存结果
                for (i=0;i<data.data.length;i++){
                    kddata.push("<br>时间:"+data.data[i].scanDate+"<br>到达:"+data.data[i].stateDescription);
                }
                $("body").html("查询结果:"+data.msg+"<br>订单号:"+data.billCode+"<br>送达用时:"+data.billPrescription+kddata);
            }
        },
        error:function (res) {  //请求接口失败  一般就是接口有问题不能访问或者网卡会出现
            //将错误打印到控制台
            console.log(res);
        }
    });
</script>

4.png
5.png
这个时候已经可以把数据输出到页面了,因为没有写css 所以全都是文字

有问题的小伙伴下方评论~

demo下载:点击下载

Last Modified: August 21, 2019
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

4 Comments
  1. 哈哈,ajax可以学会了就很通透~(博主很棒啊~!@(大拇指))

    1. @程志辉哈哈,欢迎博主来看我的小博客,群友大多数学生对编程感兴趣,我就发了一些给他们学习,仿站的那个搜索我博客也能看到他的,已经收录了,难搞哦,也不知道这种人弄这是做什么用的。

  2. 学习了,感谢楼主

    1. @打驴哈哈,多来看看呀