angular.js的post数据方式
公司的项目前端部分现在改用angular,一切从头学起,今天记录一下关于数据请求的问题,由于get的请求方式比较简单,与post也类似,所以就单独讲讲post方式。
文档上post数据的写法有好几种,都是利用$http模块,通用写法如下:
// Simple GET request example:
$http({
method: 'GET',
url: '/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
然后我们将方式改为post,加上data试一下。
$http({
method:'post',
url:'test.php',
data:{name:'test',age:20},
}).then(function successCallback(response) {
alert('添加成功');
}, function errorCallback(response) {
alert('添加失败');
});
php文件中我们就写一行print_r($_POST)即可。
打开谷歌浏览器F12,查看下调试信息,发现数据传输过去了

但是细心的朋友一定会发现一个问题,就是我们这里的传输方式是request playload,而不是我们通常的form data。他俩最大的区别就是,request playload的方式我们在php文件中通过$_POST是拿不到传过来的数据的。可以看到返回的打印信息为空。

我们再修改一下,加上headers和transformRequest
$http({
method:'post',
url:'test.php',
data:{name:'test',age:20},
headers:{'Content-Type': 'application/x-www-form-urlencoded'},
transformRequest: function (data) {
return $.param(data);
}
}).then(function successCallback(response) {
alert('添加成功');
}, function errorCallback(response) {
alert('添加失败');
});
然后查看返回值

成功了,并且此时传输方式变成了

OK,over!
angular.js的post数据方式的更多相关文章
- angular js 指令的数据传递 及作用域数据绑定
<div my-directive my-url="http://google.com" my-link-text="Click me to go to Googl ...
- angular js 页面修改数据存入数据库
一.编写service,修改数据要根据ID回显数据 //根据ID查询 public Brand findById(Long id); //修改 public int update(Brand bran ...
- angular js 页面添加数据保存数据库
一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ...
- {{angular.js 使用技巧}} - 基于验证框架的扩展(w5cValidator)
开场白: angular.js 是谷歌出的前端js MV*框架,我也是今年做 worktile 的时候才开始接触的,起初技术选型的时候还准备使用 backbone(毕竟很多大公司在使用他,而且也是比较 ...
- Angular js 之动态传数据到下一个页面和动态通过ng-click进入不同的页面
+关于Angular js中一些千篇一律的后台获取数据 首先在services.js里面把服务写好 然后在controller里面把数据给打印出来 (首先需要把数据注入) +关于Angular js中 ...
- 抓取Js动态生成数据且以滚动页面方式分页的网页
代码也可以从我的开源项目HtmlExtractor中获取. 当我们在进行数据抓取的时候,如果目标网站是以Js的方式动态生成数据且以滚动页面的方式进行分页,那么我们该如何抓取呢? 如类似今日头条这样的网 ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- angular js 模拟获取后台的数据
在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------pe ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
随机推荐
- 超详细单机版搭建hadoop环境图文解析
前言: 年前,在老大的号召下,我们纠集了一帮人搞起了hadoop,并为其取了个响亮的口号“云在手,跟我走”.大家几乎从零开始,中途不知遇到多少问题,但终 于在回家之前搭起了一个拥有12台服务器的集群, ...
- [Javascript] Gradient Fills on the HTML5 Canvas
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- android107 指针入门
#include <stdio.h> #include <stdlib.h> //指针就是内存地址 //32为操作系统最大是4G内存,32为系统则是2的32次方, //所以只能 ...
- swap函数的例子
13.31为你的HasPtr类定义一个<运算符,并定义一个HasPtr的vector为这个vector添加一些元素,并对它执行sort.注意何时会调用swap. #include<iost ...
- 常用工具之stunnel
The stunnel program is designed to work as an SSL encryption wrapper between remote client and local ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- android开发之使用上下文菜单
android中的上下文菜单类似于PC上的鼠标右键单击,不同的是android上没有鼠标这一概念,更谈不上右键单击,在android中,一般是长按某个View,调出上下文菜单.与OptionsMenu ...
- iOS之定位与地图
概览 现在很多社交.电商.团购应用都引入了地图和定位功能,似乎地图功能不再是地图应用 和导航应用所特有的.的确,有了地图和定位功能确实让我们的生活更加丰富多彩,极大的改变了我们的生活方式.例如你到了一 ...
- iOS之获取当前时间日期并按固定格式显示
写一个常用的获取当前日期,时间的代码.并且能以规定的格式显示出来 1 2 3 4 5 NSDate *currentDate = [NSDate date];//获取当前时间,日期 NSDateFor ...
- Android_Broadcast
/** * Broadcast(广播):是一种广泛运用的在应用程序之间传输信息的机制 * * BroadcastReceiver(广播接收者) * 是对发送出来的广播进行过滤接收并响应的一类组件,它就 ...