JS通过JSONP跨域请求API接口

时间:2022-11-21 21:53:19

一般JS跨域请求,会经常用到dataType:"JSONP"的格式请求,这里做了一个接口服务器和请求服务器的例子:


接口服务器地址:http://www.api.com/login.php

接口服务器要这样写:

<?php
$response['status']=200;
$response['msg']="success";
echo "login(".json_encode($response).")";//login({"status":200,"msg":"success"})
?>

JS脚本服务器的地址:http://www.abc.cn/index.html

JS脚本服务器代码要这样写:

<html>
<head>
    <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<script>
    $.ajax({
        dataType:"JSONP",
        jsonp:"callback",//请求自动带上callback参数,callback值为jsonpCallback的值
        jsonpCallback:"login",//接口服务器应该返回字符串数据格式:login(JSON数据)
        type:"post",
        url:"http://www.api.com/login.php",//接口服务器地址
        data:{},//请求数据
        success:function(response){
            //成功执行
            console.log(response);
        },
        error:function(e){
            //失败执行
            alert(e.status+','+ e.statusText);
        }
    })
</script>
</body>
</html>

请求成功后,success接收到的response内容直接是JSON格式,可以直接调用:

Object {status: 200, msg: "success"}