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 相关文章推荐
javascript prototype,executing,context,closure
Dec 24 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
JavaScript日期选择功能示例
Jan 16 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
前端实现滑动按钮AJAX与后端交互的示例代码
Feb 24 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数组是否为索引数组的实现方法
2013/06/13 PHP
php获取textarea的值并处理回车换行的方法
2014/10/20 PHP
使用Appcan客户端自动更新PHP版本号(全)
2015/07/31 PHP
降低PHP Redis内存占用
2017/03/23 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
Jquery on绑定的事件 触发多次实例代码
2016/12/08 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python随机生成数据后插入到PostgreSQL
2016/07/28 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
django传值给模板, 再用JS接收并进行操作的实例
2018/05/28 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
如何使用python进行pdf文件分割
2019/11/11 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
2016/07/19 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
倩碧英国官网:Clinique英国
2018/08/10 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
农村党员一句话承诺
2014/05/30 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书