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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
Echarts动态加载多条折线图的实现代码
May 24 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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
js可突破windows弹退效果代码
2008/08/09 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
nodejs加密Crypto的实例代码
2016/07/07 NodeJs
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python获取服务器信息的最简单实现方法
2015/03/05 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
五一家具促销方案
2014/01/10 职场文书
贷款委托书
2014/08/01 职场文书
2014年高中教师工作总结
2014/12/19 职场文书
学生会任命书范本
2015/09/21 职场文书
幼儿园班级管理心得体会
2016/01/07 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python