AngularJS $http模块POST请求实现

2019-11-19 16:52:52

字体：大中小

来源：转载

供稿：网友

一、代码如下：

$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("&");

$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); //传的数据都在$post中了;

二、 $http请求数据主要会有以下三种方式

1.get请求

2.post请求

3.jsonp

<!DOCTYPE html><html lang="zh_CN"><head>  <meta charset="UTF-8">  <title>Angular基础</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方式发送数据到后台，    // 解决办法：在后台php中使用$postData=file_get_contents("php://input",true);这样就可以获得前端传送过来的数据    var postData={msg:'post的内容'};    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数据的方式$msg=file_get_contents("php://input",true);$name=$_GET['name'];echo $name.$msg."_post";

显示效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：利用jQuery解析获取JSON数据

下一篇：node.js实现登录注册页面

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注