在开发过程中通常会接触到对接外部平台接口的操作,但用js会遇到跨域问题所以最终还是选择php发送请求。
谷歌浏览器测试时解决跨域问题,在浏览器属性-目标后面加 --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security 可以执行跨域Ajax请求。
ajax发送请求对接接口
简单的分享一下ajax发送请求方法,注:这个平台某功能需要接两个接口,一个接口获取token,然后另一个接口需要携带token才行,测试时解决:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
<script type="text/javascript" src="xxx/js/jquery.js" ></script>
</head>
<body>
<input id="number" type="text" name="number" placeholder="xxx" />
<br>
<button class="btn" type="submit" id="btn">领取</button>
</body>
<script type="text/javascript">
$(function () {
function Receive(token){//将token传入这里继续发送请求
const Data ={xxxx:ssss}//根据接口要求发送相关数据
$.ajax({
type: "POST", // 请求方式
headers: {
'access_token':token//带token请求
},
url: "http://xxxxx/xxx/xxx/xxx", // 相关接口地址
data:JSON.stringify(Data),
contentType:'application/json',
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) {
console.log(data)
if(data.msg=="SUCCESS"){
alert('测试成功');
}else{
alert('测试失败!');
}
$('#number').val('');
},
error: function () {
alert("测试失败!");
$('#number').val('');
}
});
}
$('#btn').click(function () {
var value = $('#number').val();
if($.trim(value)==''){
alert('请输入相关内容!');
}else{
$.ajax({
type: "POST", // 发送请求方式
url: "http://xxxxx/xxx/xxx/xxx", // 获取相关token接口地址
data: {键:值,},//相关数据
dataType: "json", // 预期返回一个 json 类型数据
success: function (data) { // data是形参名,代表返回的数据
// console.log(data)//这里只是获取token
Receive(data.access_token);//获取token成功继续发送请求
},
error: function () {
alert("测试失败!");
$('#number').val('');//清空输入框
}
});
}
})
})
</script>
</html>
php发送请求对接接口:
<?php
namespace xxx\controller;
use think\Db;
use think\Request;
class Index
{
public function index()
{
if (Request()->isAjax()){
$data = Request()->param();
$value = $data['value'];
$url = 'http://xxxxx/xxxxx/xx获取token的接口';
$data = ['数据键' => 数据值];
$postdata = http_build_query($data);
$options = array(
'http' => array(
'method' => 'POST',
'header' => 'Content-type:application/json',
'content' => $postdata,
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$token= json_decode($result)->access_token;//获取token
if($token){
//二次接口请求
$url = 'http://xxxxx/xxxxx/xx第二个接口';
$data = ['数据键' => 数据值];
$postdata = http_build_query($data);
$options = array(
'http' => array(
'method' => 'POST',
'header' => "Content-type:application/json\r\n"."access_token:".$token." \r\n",
'content' => $postdata,
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
return ["msg"=> $result];
}else{
return json(["status" => false, "msg" => "测试失败!"]);
}
return ["msg" => $token];
if($result['access_token']){
return json(["status" => false, "msg" => $result['access_token']]);
}else{
return json(["status" => false, "msg"=> "测试失败!"]);
}
}
}
}