AngularJS $http模塊POST請(qǐng)求實(shí)現(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請(qǐng)求數(shù)據(jù)主要會(huì)有以下三種方式
1.get請(qǐng)求
2.post請(qǐng)求
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) { //錯(cuò)誤代碼 }); //$http.post采用postJSON方式發(fā)送數(shù)據(jù)到后臺(tái), // 解決辦法:在后臺(tái)php中使用$postData=file_get_contents("php://input",true);這樣就可以獲得前端傳送過來(lái)的數(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) { //錯(cuò)誤代碼 }); 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){ //錯(cuò)誤代碼 }); $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";
顯示效果:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 解決angular的$http.post()提交數(shù)據(jù)時(shí)后臺(tái)接收不到參數(shù)值問題的方法
- 對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
- Angularjs中$http以post請(qǐng)求通過消息體傳遞參數(shù)的實(shí)現(xiàn)方法
- 后端接收不到AngularJs中$http.post發(fā)送的數(shù)據(jù)原因分析及解決辦法
- AngularJS下$http服務(wù)Post方法傳遞json參數(shù)的實(shí)例
- AngularJS $http post 傳遞參數(shù)數(shù)據(jù)的方法
- angularJS 發(fā)起$http.post和$http.get請(qǐng)求的實(shí)現(xiàn)方法
- AngularJS封裝$http.post()實(shí)例詳解
- 深入理解Angularjs中$http.post與$.post
- Angular利用HTTP POST下載流文件的步驟記錄
相關(guān)文章
angularjs 處理多個(gè)異步請(qǐng)求方法匯總
這篇文章主要介紹了angularjs 處理多個(gè)異步請(qǐng)求方法匯總,需要的朋友可以參考下2015-01-01AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊示例詳解
這篇文章主要給大家介紹了關(guān)于AngularJs用戶輸入動(dòng)態(tài)模板XSS攻擊的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用angularjs具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-04-04監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例
前端在做數(shù)據(jù)渲染的時(shí)候經(jīng)常會(huì)遇到在數(shù)據(jù)渲染完畢后執(zhí)行某些操作,這篇文章主要介紹了監(jiān)聽angularJs列表數(shù)據(jù)是否渲染完畢的方法示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過
下面小編就為大家分享一篇AngularJs 最新驗(yàn)證手機(jī)號(hào)碼的實(shí)例,成功測(cè)試通過,具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2017-11-11Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇Javascript基礎(chǔ)_標(biāo)記文字的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-06-06AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)的兩種方式
這篇文章分別給大家介紹了AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)的兩種方式,一種是通過普通指令實(shí)現(xiàn)標(biāo)簽頁(yè),另外一種是通過自定義指令實(shí)現(xiàn)的標(biāo)簽頁(yè),有需要的朋友們可以來(lái)參考借鑒,下面來(lái)一起看看吧。2016-09-09AngularJS 路由詳解和簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 路由,這里整理了相關(guān)資料進(jìn)行詳細(xì)介紹,并附實(shí)例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴可以參考下2016-07-07AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出
這篇文章主要介紹了AngularJS入門(用ng-repeat指令實(shí)現(xiàn)循環(huán)輸出,需要的朋友可以參考下2016-05-05angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)多張圖片上傳并預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02AngularJS ui-router (嵌套路由)實(shí)例
本篇文章主要介紹了AngularJS ui-router (嵌套路由)實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03