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 单击li防止重复加载的实现代码
Dec 24 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
Aug 29 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
微信小程序:数据存储、传值、取值详解
May 07 Javascript
vue中typescript装饰器的使用方法超实用教程
Jun 17 Javascript
解决vue项目,npm run build后,报路径错的问题
Aug 13 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
Zend Framework动作助手Url用法详解
2016/03/05 PHP
PHP连接及操作PostgreSQL数据库的方法详解
2019/01/30 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
2013/04/25 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
2016/05/25 Javascript
ES6下子组件调用父组件的方法(推荐)
2018/02/23 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Python入门之后再看点什么好?
2018/03/05 Python
深入学习python多线程与GIL
2019/08/26 Python
Python中生成一个指定长度的随机字符串实现示例
2019/11/06 Python
python利用tkinter实现图片格式转换的示例
2020/09/28 Python
python中的时区问题
2021/01/14 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
经理秘书求职自荐信范文
2014/03/23 职场文书
大学生求职信
2014/06/17 职场文书
好的旅游活动方案
2014/08/19 职场文书
六查六看六改心得体会
2014/10/14 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
Python数据分析入门之数据读取与存储
2021/05/13 Python
Java中使用Filter过滤器的方法
2021/06/28 Java/Android
Java字符串逆序方法详情
2022/03/21 Java/Android
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android