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 的目的是 ...
随机推荐
- HDU 1847 Good Luck in CET-4 Everybody! (博弈论sg)
Good Luck in CET-4 Everybody! Problem Description 大学英语四级考试就要来临了,你是不是在紧张的复习?或许紧张得连短学期的ACM都没工夫练习了.反正我知 ...
- 【17】以独立语句将newed对象置入智能指针
1.为什么? 考虑下面的情况:方法声明为void processWidget(shared_ptr<Widget> pw,int priority). 调用方法 processWidget ...
- Could not initialize class org.apache.log4j.LogManager 报错
部署项目的时候,在windows下一切正常,但是在centos下就发生如下错误 Caused by: java.lang.ExceptionInInitializerError at com.dsid ...
- android110 jni01
##交叉编译(编译就是编译成汇编指令,使得电脑能够识别,比如windows平台模拟linux平台编译出来得程序可以在linux上运行.) * 在一个平台下,编译出另一个平台能够执行的二进制的代码 * ...
- OPTIMIZE TABLE
INNODB 不支持 mysql> OPTIMIZE TABLE t; +--------+----------+----------+----------------------------- ...
- BeagleBone Black Linux驱动程序开发入门(1): LED驱动程序
这篇文章展示如何在BBB平台上编写LED驱动程序,本文的程序是根据国嵌S3C2440的LED驱动的例子并结合内核中OMAP系列的gpio操作来改的.本文中的程序包括驱动程序模块和用户空间程序.废话不多 ...
- axis2调用webservice
public static long TIMEOUTINMILLISECONDS=100000; /** * 调用webservice * @param url webserviceURL * @pa ...
- bootstrap系列整理
去年的九月份做第一版文档站时, 就开始尝试使用bootstrap ,由于当时对node 还一知半解,大部分精力放在nodejs上,bootstrap只是拿来就用,起步文档都没看: 当别人提到 Norm ...
- elasticsearch学习一、安装和配置
原文链接:http://jingyan.baidu.com/article/48206aead42b53216bd6b372.html ElasticSearch是一个基于Lucene的搜索服务器.它 ...
- css position 定位
fixed 属于绝对定位,相对于浏览器窗口定位 (IE 6不支持) relative 相对定位,通过设置垂直或水平位置,让这个元素"相对于"它的原始起点进行移动. ...