我正面临同源策略问题,通过研究这个主题,我发现对于我的特定项目来说,最好的方法是使用JSONP进行跨源请求。
我一直在阅读IBM关于JSONP的文章,但是我不是100%清楚发生了什么。
我在这里所要求的,是一个简单的jQuery>PHP JSONP请求(或任何术语可能;))-像这样的东西(显然这是不正确的,它只是让你可以得到我想要实现的想法:)):
jQuery:$.post('http://MySite.com/MyHandler.php',{firstname:'Jeff'},function(res){
alert('Your name is '+res);
});
PHP: <?php
$fname = $_POST['firstname'];
if($fname=='Jeff')
{
echo 'Jeff Hansen';
}
?>
如何将其转换为适当的JSONP请求?如果我要在返回的结果中存储HTML,那也可以吗?
getJSON在外部域它会自动操作一个JSONP请求,例如我的推滑块这里
如果您查看源代码,您可以看到我使用. getjson调用Twitter API。
所以你的例子是:这是测试和工作(你可以去http://smallcoders.com/javascriptdevenvironment.html看到它在行动)
//JAVASCRIPT
$.getJSON('http://www.write-about-property.com/jsonp.php?callback=?','firstname=Jeff',function(res){
alert('Your name is '+res.fullname);
});
//SERVER SIDE
<?php
$fname = $_GET['firstname'];
if($fname=='Jeff')
{
//header("Content-Type: application/json");
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
}
?>
注意?callback=?和+ res.fullname
首先,您不能使用JSONP发出POST请求。
基本上是动态地插入一个脚本标签来加载你的数据。因此,只有GET请求是可能的。
此外,您的数据必须封装在回调函数中,该回调函数在请求完成后调用,以将数据加载到变量中。
整个过程由jQuery自动完成。只是使用$。但是,外部域上的getJSON并不总是有效。从我个人的经历来看。
最好的方法是添加&callback=?给你的网址。
在服务器端,你必须确保你的数据被包装在这个回调函数中。
。
echo $_GET['callback'] . '(' . $data . ')';
编辑:我还没有足够的代表来评论Liam的回答,所以解决方案在这里。
替换Liam的行
echo "{'fullname' : 'Jeff Hansen'}";
echo $_GET['callback'] . '(' . "{'fullname' : 'Jeff Hansen'}" . ')';
更多建议
JavaScript:$.ajax({
url: "http://FullUrl",
dataType: 'jsonp',
success: function (data) {
//Data from the server in the in the variable "data"
//In the form of an array
}
});
PHP回调:<?php
$array = array(
'0' => array('fullName' => 'Meni Samet', 'fullAdress' => 'New York, NY'),
'1' => array('fullName' => 'Test 2', 'fullAdress' => 'Paris'),
);
if(isset ($_GET['callback']))
{
header("Content-Type: application/json");
echo $_GET['callback']."(".json_encode($array).")";
}
?>
要使服务器响应有效的JSONP数组,请将JSON包装在括号()
中,并预封装callback
:
echo $_GET['callback']."([{'fullname' : 'Jeff Hansen'}])";
使用json_encode()将原生PHP数组转换为JSON:
$array = array(
'fullname' => 'Jeff Hansen',
'address' => 'somewhere no.3'
);
echo $_GET['callback']."(".json_encode($array).")";
简单的jQuery, PHP和JSONP示例如下:
window.onload = function(){
$.ajax({
cache: false,
url: "https://jsonplaceholder.typicode.com/users/2",
dataType: 'jsonp',
type: 'GET',
success: function(data){
console.log('data', data)
},
error: function(data){
console.log(data);
}
});
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$.ajax({
type: "GET",
url: '<?php echo Base_url("user/your function");?>',
data: {name: mail},
dataType: "jsonp",
jsonp: 'callback',
jsonpCallback: 'chekEmailTaken',
success: function(msg){
}
});
return true;
在控制器:public function ajax_checkjp(){
$checkType = $_GET['name'];
echo $_GET['callback']. '(' . json_encode($result) . ');';
}
使用这个…
$str = rawurldecode($_SERVER['REQUEST_URI']);
$arr = explode("{",$str);
$arr1 = explode("}", $arr[1]);
$jsS = '{'.$arr1[0].'}';
$data = json_decode($jsS,true);
现在.
使用$data['elemname']
访问。
发送JSON请求与JSON对象。
请求格式:$.ajax({
method : 'POST',
url : 'xxx.com',
data : JSONDataObj, //Use JSON.stringfy before sending data
dataType: 'jsonp',
contentType: 'application/json; charset=utf-8',
success : function(response){
console.log(response);
}
})