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 相关文章推荐
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
详解ECharts使用心得总结
Dec 06 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
浅谈js中的bind
Mar 18 Javascript
简述Vue中容易被忽视的知识点
Dec 09 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
DEDE采集大师官方留后门的删除办法
2011/01/08 PHP
有关PHP性能优化的介绍
2013/06/20 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php身份证号码检查类实例
2015/06/18 PHP
jQuery源码分析-03构造jQuery对象-工具函数
2011/11/14 Javascript
javascript for循环从入门到偏门(效率优化+奇特用法)
2012/08/01 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
2016/05/23 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
vue-router 中router-view不能渲染的解决方法
2017/05/23 Javascript
详解vue渲染从后台获取的json数据
2017/07/06 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
django 多数据库配置教程
2018/05/30 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/27 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
我喜欢你 抖音表白程序python版
2019/04/07 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
Python eval函数介绍及用法
2020/11/09 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
普通话演讲稿
2014/09/03 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
vue+element ui实现锚点定位
2021/06/29 Vue.js
Python实现信息管理系统
2022/06/05 Python