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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
Jul 27 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
一些可能会用到的Node.js面试题
Jun 15 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
vue组件入门知识全梳理
Sep 21 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
第十二节--类的自动加载
2006/11/16 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
汉化英文版的Dreamweaver CS5并自动提示jquery
2010/11/25 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
jQuery实现仿腾讯微博滑出效果报告每日天气的方法
2015/05/11 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
详解JavaScript类型判断的四种方法
2020/10/21 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
CentOS安装pillow报错的解决方法
2016/01/27 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python 剪切移动文件的实现代码
2018/08/02 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
python批量修改图片尺寸,并保存指定路径的实现方法
2019/07/04 Python
Django中从mysql数据库中获取数据传到echarts方式
2020/04/07 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
电子商务专业推荐信范文
2013/12/02 职场文书
室内拓展活动方案
2014/02/13 职场文书
临床护理求职信
2014/04/26 职场文书
大学专科求职信
2014/07/02 职场文书
在校证明模板
2015/06/17 职场文书
六年级作文之自救
2019/12/19 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers