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的console.log()用法小结
May 31 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
vue2.0 axios前后端数据处理实例代码
Jun 30 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
关于vue中的ajax请求和axios包问题
Apr 19 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
vue实现微信获取用户信息的方法
Mar 21 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
php 正则匹配函数体
2009/08/25 PHP
php实现httpRequest的方法
2015/03/13 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
初窥JQuery(二) 事件机制(1)
2010/11/25 Javascript
JavaScript中的私有/静态属性介绍
2012/07/26 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
js实现点击获取验证码倒计时效果
2021/01/28 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
详解Angular2中Input和Output用法及示例
2017/05/21 Javascript
微信小程序实现星级评价效果
2018/12/28 Javascript
Python的组合模式与责任链模式编程示例
2016/02/02 Python
Python正则表达式教程之二:捕获篇
2017/03/02 Python
python事件驱动event实现详解
2018/11/21 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
jupyter notebook 添加kernel permission denied的操作
2020/04/21 Python
python map比for循环快在哪
2020/09/21 Python
交通专业个人自荐信格式
2013/09/23 职场文书
数学专业毕业生自荐信
2013/11/10 职场文书
银行求职信个人范文
2013/12/16 职场文书
工艺员岗位职责
2014/02/11 职场文书
学生党员公开承诺书
2014/05/28 职场文书
社区服务活动小结
2014/07/08 职场文书
建筑节能汇报材料
2014/08/22 职场文书
小学感恩节活动总结
2015/03/24 职场文书
信用卡催款律师函
2015/05/27 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书