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 live函数
Dec 24 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
Apr 26 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
Mar 25 Javascript
JavaScript编程的单例设计模讲解
Nov 10 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
浅谈es6中export和export default的作用及区别
Feb 07 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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
PHP5/ZendEngine2的改进
2006/10/09 PHP
如何使用动态共享对象的模式来安装PHP
2006/10/09 PHP
2.PHP入门
2006/10/09 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php Smarty 字符比较代码
2011/02/27 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
php实现图片缩略图的方法
2016/03/29 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue组件之间数据传递的方法实例分析
2019/02/12 Javascript
vue防止花括号{{}}闪烁v-text和v-html、v-cloak用法示例
2019/03/13 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
js+canvas实现转盘效果(两个版本)
2020/09/13 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python字符串匹配算法KMP实例
2015/07/18 Python
python web基础之加载静态文件实例
2018/03/20 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
pandas按条件筛选数据的实现
2021/02/20 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
文明礼貌演讲稿
2014/05/12 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
护士个人年终总结
2015/02/13 职场文书
清明节寄语2015
2015/03/23 职场文书
运动会闭幕式主持词
2015/07/01 职场文书