AngularJS下$http服务Post方法传递json参数的实例


Posted in Javascript onMarch 29, 2018

本文主要介绍如何使用Angularjs $http服务以POST方法向服务器传递json对象数据。

具体如下:

一、$http POST方法默认提交数据的类型为application/json

var data = {'wid':'0', 'praise' : '25'}; 
$http.post(url, data).success(function(result) { 
 // 
});

最终发送的请求是:

POST http://www.example.com HTTP/1.1 
Content-Type: application/json;charset=utf-8 
 
{'wid':'0','praise':'25'}

默认的这种方式可以直接将json对象以字符串的形式传递到服务器中,比较适合 RESTful 的接口。但是php脚本的$_POST无法从请求体中获得json数据。

此时可以用:

$data = file_get_contents("php://input"); //获得原始输入流

注:enctype="multipart/form-data" 的时候 php://input 是无效的

获得请求原始输入流之后再做相应处理就可以获得json数据了。

二、 采用x-www-form-urlencoded 方式提交获得json数据

app.factory("Comment",function($http){
 return {
  get : function(commentFileUrl) {
   return $http({
    method: "GET",
    url: commentFileUrl,
    params: {R:Math.random()},
    headers: {'Cache-Control':'no-cache'}
   });
  },

  //保存一个评论
  save : function(toUrl,saveFileUrl,Data) {
   $http({
    method: "POST",
    url: toUrl,
    data: {saveUrl:saveFileUrl,commit:Data},
    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(data){
    console.log("数据已保存!");
   }).error(function(data) {
    alert("数据保存失败,错误信息:" + JSON.stringify({data:data}));
   });
  }
 }
});
var updateClickRate={'wid':'0','click_rate':'87'};
Comment.save("php/updateWork.php","../userdata/work_content.json",JSON.stringify(updateClickRate));

最终发送的请求是:

AngularJS下$http服务Post方法传递json参数的实例

然后php服务端通过$_POST['commit'] 对象就可以获得json字符串了。json对象用于http数据传输方便易用,相比xml更加小巧轻便。希望本文对你有所帮助。推荐一篇文章:HTTP四种常见的POST提交数据方式然后 php服务端通过$_POST['commit'] 对象就可以获得json字符串了。

json对象用于http数据传输方便易用,相比xml更加小巧轻便。希望本文对你有所帮助。

以上这篇AngularJS下$http服务Post方法传递json参数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
Jul 14 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
Vue组件之Tooltip的示例代码
Oct 18 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
微信小程序模板template简单用法示例
Dec 04 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
利用js实现前后台传送Json的示例代码
Mar 29 #Javascript
vue中Npm run build 根据环境传递参数方法来打包不同域名
Mar 29 #Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 #Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 #Javascript
Vue.js 表单控件操作小结
Mar 29 #Javascript
js传递数组参数到后台controller的方法
Mar 29 #Javascript
You might like
PHP默认安装产生系统漏洞
2006/10/09 PHP
php获取网页标题和内容函数(不包含html标签)
2014/02/03 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
教你如何使用PHP输出中文JSON字符串
2014/05/22 Javascript
jQuery中get和post方法传值测试及注意事项
2014/08/08 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
Augularjs-起步详解
2016/07/08 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
Vue通过ref父子组件拿值方法
2018/09/12 Javascript
VUE v-for循环中每个item节点动态绑定不同函数的实例
2018/09/26 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python数据处理numpy.median的实例讲解
2018/04/02 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
留学生如何写好自荐信
2013/12/27 职场文书
班主任班级寄语大全
2014/04/04 职场文书
就职演讲稿范文
2014/05/19 职场文书
唐山大地震的观后感
2015/06/05 职场文书
导游词之无锡梅园
2019/11/28 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android