JS通过JSONP跨域请求API接口

时间:2022-11-21 22:07:30

一般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"}