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 11 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
Jan 27 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
理解javascript中的闭包
Jan 11 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
PHP form 表单传参明细研究
2009/07/17 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
PHP中的use关键字概述
2014/07/23 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
2017/01/21 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
Python完全新手教程
2007/02/08 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python3.0中普通方法、类方法和静态方法的比较
2019/05/03 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python对wav文件的重采样实例
2020/02/25 Python
简述 Python 的类和对象
2020/08/21 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
Redbubble法国:由独立艺术家设计的独特产品
2019/01/08 全球购物
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
开放系统互连参考模型
2016/06/29 面试题
咖啡店创业计划书范文
2014/09/15 职场文书
党员民主评议总结
2014/10/20 职场文书
css3实现的加载动画效果
2021/04/07 HTML / CSS
python中__slots__节约内存的具体做法
2021/07/04 Python
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python