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 相关文章推荐
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 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绘制一条直线的方法
2015/01/24 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
js获取IP地址的方法小结
2014/07/01 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
2017/05/07 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
实用Javascript调试技巧分享(小结)
2019/06/18 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
Python生成器以及应用实例解析
2018/02/08 Python
详解python分布式进程
2018/10/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Django操作session 的方法
2020/03/09 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
python三引号如何输入
2020/07/06 Python
Python extract及contains方法代码实例
2020/09/11 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
印尼极简主义和实惠的在线家具店:Fabelio
2019/03/27 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
日语专业毕业生求职信
2013/12/04 职场文书
金融专业毕业生自荐信
2014/06/26 职场文书
离婚代理词范文
2015/05/23 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
美元符号 $
2022/02/17 杂记