AngularJS $http模块POST请求实现


Posted in Javascript onApril 08, 2017

一、代码如下:

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

显示效果:

AngularJS $http模块POST请求实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
Knockout visible绑定使用方法
Nov 15 Javascript
javascript中的this详解
Dec 08 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
Sep 06 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
vue axios 二次封装的示例代码
Dec 08 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
vue-router 中 meta的用法详解
Nov 01 Javascript
node.js实现登录注册页面
Apr 08 #Javascript
详解vue2路由vue-router配置(懒加载)
Apr 08 #Javascript
js仿微信公众平台打标签功能
Apr 08 #Javascript
详解node.js搭建代理服务器请求数据
Apr 08 #Javascript
无循环 JavaScript(map、reduce、filter和find)
Apr 08 #Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 #Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
PHP中UNIX时间戳和日期间的转换与计算实例
2014/11/19 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
javascript中的107个基础知识收集整理 推荐
2010/03/29 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
javascript学习笔记--数字格式类型
2014/05/22 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
老生常谈javascript变量的命名规范和注释
2016/09/29 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
Vue中使用webpack别名的方法实例详解
2018/06/19 Javascript
JavaScript ES6箭头函数使用指南
2018/12/30 Javascript
Vue 权限控制的两种方法(路由验证)
2019/08/16 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
python保存文件方法小结
2018/07/27 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
matplotlib交互式数据光标mpldatacursor的实现
2021/02/03 Python
世界领先的在线地板和建筑材料批发商:BuildDirect
2017/02/26 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
KIEHL’S科颜氏官方旗舰店:源自美国的顶级护肤品牌
2018/06/07 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
解释一下钝化(Swap out)
2016/12/26 面试题
小学生班会演讲稿
2014/01/09 职场文书
小升初自荐信范文
2015/03/05 职场文书
患者身份识别制度
2015/08/06 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
Python基础知识学习之类的继承
2021/05/31 Python
进行数据处理的6个 Python 代码块分享
2022/04/06 Python