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两段代码,两个小技巧
Feb 04 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
[JSF]使用DataModel处理表行事件的实例代码
Aug 05 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
详解React中合并单元格的正确写法
Jan 08 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 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
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
javascript 导出数据到Excel(处理table中的元素)
2009/12/18 Javascript
cloudgamer出品ImageZoom 图片放大效果
2010/04/01 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
JS异步函数队列功能实例分析
2017/11/28 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
pandas 实现字典转换成DataFrame的方法
2018/07/04 Python
详解python中的Turtle函数库
2018/11/19 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
Python数据正态性检验实现过程
2020/04/18 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
基于Python实现天天酷跑功能
2021/01/06 Python
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
学生自我鉴定范文
2013/10/04 职场文书
实习科室评语
2015/01/04 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
家长会感言
2015/08/01 职场文书
公司车辆维修管理制度
2015/08/05 职场文书