AngularJS $http模塊POST請求實現(xiàn)
更新時間：2017年04月08日 11:32:09 作者：IM楊燕飛
本篇文章主要介紹了AngularJS $http模塊POST請求實現(xiàn)，這里整理了詳細的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
一、代碼如下：
$http({
method:'post',
url:'post.php',
data:{name:"aaa",id:1,age:20}
}).success(function(req){
console.log(req);
})
解決方案：
1、
var myApp = angular.module('app',[]);
myApp.config(function($httpProvider){
$httpProvider.defaults.transformRequest = function(obj){
var str = [];
for(var p in obj){
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
2.
$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("&");
}
}).success(function(req){
console.log(req);
})
php
$rawpostdata = file_get_contents("php://input");
$post = json_decode($rawpostdata, true);
//傳的數(shù)據(jù)都在$post中了;
二、 $http請求數(shù)據(jù)主要會有以下三種方式
1.get請求
2.post請求
3.jsonp
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Angular基礎(chǔ)</title>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="personCtrl">
姓：<input type="text" ng-model="firstName"/><br/>
名：<input type="text" ng-model="lastName"/><br/>
姓名：<span ng-bind="firstName"></span><span ng-bind="lastName"></span>
</div>
</div>
<script src="angular.min.js"></script>
<script type="application/javascript">
var myApp=angular.module('myApp',[]);
myApp.controller('personCtrl',function($scope,$http){
$http.get('getData.php').
success(function(data) {
console.log(data);
}).
error(function(err) {
//錯誤代碼
});
//$http.post采用postJSON方式發(fā)送數(shù)據(jù)到后臺，
// 解決辦法：在后臺php中使用$postData=file_get_contents("php://input",true);這樣就可以獲得前端傳送過來的數(shù)據(jù)
var postData={msg:'post的內(nèi)容'};
var config={params:{id:'5',name:'張三豐'}};
$http.post('postData.php', postData,config).
success(function(data) {
console.log(data);
}).
error(function(err) {
//錯誤代碼
});
var myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
function(data){
console.log(data);
}
).error(function(err){
//錯誤代碼
});
$scope.firstName="Wang";
$scope.lastName="Ben";
});
</script>
</body>
</html>
<?php
//postData.php文件
//用接收json數(shù)據(jù)的方式
$msg=file_get_contents("php://input",true);
$name=$_GET['name'];
echo $name.$msg."_post";
顯示效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 解決angular的$http.post()提交數(shù)據(jù)時后臺接收不到參數(shù)值問題的方法
- 對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- Angularjs中$http以post請求通過消息體傳遞參數(shù)的實現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實例
- AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
- angularJS 發(fā)起$http.post和$http.get請求的實現(xiàn)方法
- AngularJS封裝$http.post()實例詳解
- 深入理解Angularjs中$http.post與$.post
- Angular利用HTTP POST下載流文件的步驟記錄
相關(guān)文章
這篇文章主要介紹了AngularJS 表達式，這里整理了詳細的資料，有需要的小伙伴可以參考下2016-09-09
下面小編就為大家?guī)硪黄狝ngularJS下對數(shù)組的對比分析。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
本篇文章主要介紹了Angular 封裝并發(fā)布組件的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
詳解Angular-ui-BootStrap組件的解釋以及使用
這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了AngularJS中下拉框的高級用法,結(jié)合實例形式分析了AngularJS下拉框的遍歷、選擇、綁定、顯示等功能實現(xiàn)方法,需要的朋友可以參考下2017-10-10
本文通過實例代碼給大家介紹了Angularjs實現(xiàn)上傳圖片預(yù)覽功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了Angular實現(xiàn)form自動布局的相關(guān)資料，以代碼片段的形式分析了Angular實現(xiàn)form自動布局的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2016-01-01
利用Angularjs中模塊ui-route管理狀態(tài)的方法
這篇文章主要給大家介紹了如何用Angularjs中的模板ui-route來管理狀態(tài)的方法,文中通過示例代碼介紹的很詳細，相信對大家的理解和學(xué)習(xí)具有一定的參考借鑒價值，有需要的朋友可以一起來學(xué)習(xí)學(xué)習(xí)。2016-12-12
本篇文章主要介紹了淺析Angular2子模塊以及異步加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了angular中的observable問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10