您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何解決AngularJS中$http的交互問(wèn)題”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何解決AngularJS中$http的交互問(wèn)題”這篇文章吧。
這篇文章,主要是通過(guò)我們熟悉的jquery中ajax和jsonp的類型方式,總結(jié)一下$http的使用。
$http 是 AngularJS 中的一個(gè)核心服務(wù),用于讀取遠(yuǎn)程服務(wù)器的數(shù)據(jù)。
1. angular中的ajax
寫法一:
$http({ method: 'GET', //可以改成POST url: '/someUrl' }).then(function successCallback(response) { // 請(qǐng)求成功執(zhí)行代碼 }, function errorCallback(response) { // 請(qǐng)求失敗執(zhí)行代碼 });
示例:
var app = angular.module('myApp', []); app.controller('siteCtrl', function($scope, $http) { $http({ method: 'GET', url: 'https://www.runoob.com/try/angularjs/data/sites.php', }).then(function successCallback(response) { console.log(response.data); }, function errorCallback(response) { console.log('失敗'); }); });
寫法二:
①GET請(qǐng)求
$http.get('/someUrl',config).then(successCallback, errorCallback); $http.get('/someUrl',{params:{}}).then(successCallback, errorCallback);
示例:
$http.get({ 'http://10.30.24.12/emp-management/empDetail', {params:{"id":3}} }).then(function successCallback(response) { console.log(response.data.name); }, function errorCallback(response) { console.log('失敗'); });
②POST請(qǐng)求
$http.post('/someUrl', data, config).then(successCallback, errorCallback);
示例:
$http({ method:'post', url:'post.php', data:{name:"aaa",id:"1",age:"20"} }).then(function successCallback(response) { console.log(response); }, function errorCallback(response) { console.log('失敗'); }); //但是,這時(shí)候你可能收不到返回的數(shù)據(jù),結(jié)果為null,這是因?yàn)橐D(zhuǎn)換成form data。 //解決方案(在post中進(jìn)行相應(yīng)配置): $http({ method:'post', url:'post.php', data:{name:"aaa",id:"1",age:"20"}, headers:{'Content-Type': 'application/x-www-form-urlencoded'}, transformRequest: function(obj) { var str = []; for(var p in obj){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); } }).then(function successCallback(response) { console.log(response); }, function errorCallback(response) { console.log('失敗'); }); /* 原理解讀: 首先,配置headers是因?yàn)?,POST提交時(shí),使用的Content-Type是application/x-www-form-urlencoded, 而使用原生AJAX的POST請(qǐng)求如果不指定請(qǐng)求頭RequestHeader,默認(rèn)使用的Content-Type是text/plain;charset=UTF-8, 在html中form的Content-type默認(rèn)值是Content-type:application/x-www-form-urlencoded,所以要進(jìn)行相應(yīng)的配置。 然后,配置transformRequest是因?yàn)?,如果參?shù)是對(duì)象,需要轉(zhuǎn)化一下。 */
2.angular中的jsonp
$http({method:'JSONP',url:''}).success().error(); $http.jsonp('/someUrl').success().error(); //這里要注意,跨域請(qǐng)求的url后一定要追加參數(shù)callback,并且callback的值是固定的,即JSON_CALLBACK,盡量不要去做任何改動(dòng)
示例:
$http({ method: 'JSONP', url: 'http://www.b.com/test.php?callback=JSON_CALLBACK' }).success(function(response){ console.log(response); }); $http.jsonp( 'http://www.b.com/test.php?callback=JSON_CALLBACK' ).success(function (response){ console.log(response); });
3.最后,總結(jié)一下注意事項(xiàng):
(1)代碼里使用的.then()也可以寫成.success().error(),但是v1.5中 $http 的 success 和 error 方法已廢棄,使用 then 方法替代;
(2)關(guān)于參數(shù):用GET的時(shí)候就是params,用POST/PUT/PATCH/DELETE就是data;
(3)$http.jsonp跨域請(qǐng)求的url后一定要追加參數(shù)callback,并且callback的值是固定的,即JSON_CALLBACK,盡量不要去做任何改動(dòng)。
以上是“如何解決AngularJS中$http的交互問(wèn)題”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。