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 相关文章推荐
jQuery向后台传入json格式数据的方法
Feb 13 Javascript
javascript事件冒泡实例分析
May 13 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 Javascript
canvas绘制多边形
Feb 24 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
Vue 实例事件简单示例
Sep 19 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
Apache设置虚拟WEB
2006/10/09 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
学习ExtJS(二) Button常用方法
2009/10/07 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
node.js中watch机制详解
2014/11/17 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
jQuery实现背景滑动菜单
2016/12/02 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
简单实现jQuery手风琴效果
2017/08/18 jQuery
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
老生常谈python中的重载
2018/11/11 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
美国高街时尚品牌:OASAP
2016/07/24 全球购物
德国大型的家具商店:Pharao24.de
2016/10/02 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
餐饮业员工工作决心书
2014/03/11 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
护理专业毕业生自荐书
2014/05/24 职场文书
教师党员自我评价范文
2015/03/04 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
企业法人任命书
2015/09/21 职场文书
SSM VUE Axios详解
2021/10/05 Vue.js