$http跨域
总结:$http 跨域 帮你做了2件事情
1.帮你创建了一个script标签 src = url
2.帮你创建声明了一个 function
function = angular.callbacks._0(args){
args
}
3.服务器接收
桌面代码,跨域 获取本地服务器 http_jsonp.php数据
1.桌面myApp, 添加angular.js, 创建index
2.绑定模块, 绑定控制器
3.添加get.php
<?php
header('Content-Type:text/html;charset=utf-8');
$res = $_GET['flag'];
if($res == 'xmg'){
echo "服务器数据";
}else {
echo "非法访问";
}
4.请求
<script src="angular.js"></script>
<script>
//1.创建模块
var app = angular.module('app', []);
//2.创建控制器
app.controller('skController', ['$scope', '$http',function ($scope, $http) {
$http({
//端口不一样, 跨域
//浏览器报错: Origin 'http://localhost:63342' is therefore not allowed access.
//http://localhost:63342/06-myAdd/index.html
url:'http://localhost/day3-code/http_jsonp.php',
method:'get',
params:{
flag:'xmg'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
});
}]);
//3.绑定模块 ng-app='app'
//4.绑定控制器
</script>
5.使用jsonp方式获取数据 (原生参考后注释)
06-myApp index.html
<!--跨域步骤一:使用src 向服务器请求数据-->
<script src="http://localhost/day3-code/get.php"></script>
06-myApp index.html
//跨域步骤二:定义方法
function callback(args) {
console.log(args);
}
6.服务器接收 callback值, 查看打印 (原生参考后注释)
http_jsonp.php
<?php
//跨域步骤三: 服务端要处理跨域
header('Content-Type:text/html;charset=utf-8');
$callback = $_GET['callback'];
echo $callback."('我是服务数据')";
7.使用$http实现跨域
$http({
//端口不一样, 跨域
//http://localhost:63342/06-myAdd/index.html
url:'http://localhost/day3-code/http_jsonp.php',
//method:'get',
method:'jsonp',
params:{
//flag:'xmg'
// JSON_CALLBACK必须全为大写
callBack:'JSON_CALLBACK'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
});
http_jsonp.php
$fn = $_GET['callBack'];
echo $fn."('我是服务数据')";
<script src="angular.js"></script>
<script>
//
var app = angular.module('app', []);
//
app.controller('skController', ['$scope', '$http',function ($scope, $http) {
//桌面html, 跨域请求服务器文件http_jsonp.php
//跨域浏览器拦截数据, 不给你
$http({
//Origin 'http://localhost:63342' is therefore not allowed access
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://localhost/day03/06get.php',
method:'get',
params:{
flag:'xmg'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
});
$http({
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://localhost/day03/06get.php',
//method:'get',//返回字符串
method:'jsonp',//返回json
params:{
//flag:'xmg',
//注意:JSON_CALLBACK 全为大写
//注意2:skcallback 为变量名, 对应 $fn = $_GET['skcallBack']; 中的skcallBack
//skcallback 注意大小写也要一致
skcallBack:'JSON_CALLBACK'
}
}).success(function (res) {
console.log(res);
}).error(function (error) {
console.log(error);
})
$http({
// 当前路径:
// http://localhost:63342/06-desktop/06-$http%E8%B7%A8%E5%9F%9F.html
url:'http://datainfo.duapp.com/shopdata/getGoods.php?callback=callback',
method:'jsonp',//返回json数据
params:{
callback:'JSON_CALLBACK'
}
}).success(function (res) {
console.log(res);
//console.log(typeof(res));
}).error(function (error) {
console.log(error);
})
}]);
//跨域步骤二:自定义方法(http帮你做了)
/* function callback(args) {
console.log(args);
}*/
//跨域步骤三:服务器处理跨域(后端)
/**
总结:$http 跨域 帮你做了2件事情
1.帮你创建了一个script标签 src = url
2.帮你创建声明了一个 function
function = angular.callbacks._0(args){
args
}
3.服务器接收数据
*/
</script>
<!--跨域步骤一 :通过src发送请求(http帮你做了)-->
<!--<script src="http://localhost/day03/get.php"></script>-->
