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中的this指针
Mar 18 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
JavaScript Canvas绘制圆形时钟效果
Aug 20 Javascript
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JavaScript生成简单等差数列
Nov 28 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单
Nov 29 Javascript
JavaScript中的一些实用小技巧总结
Apr 07 Javascript
vue中在vuex的actions中请求数据实例
Nov 08 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 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
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
使用php将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
js代码实现微博导航栏
2015/07/30 PHP
jquery 的 $("#id").html() 无内容的解决方法
2010/06/07 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jQuery中dom元素上绑定的事件详解
2015/04/24 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
vue vue-Router默认hash模式修改为history需要做的修改详解
2018/09/13 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
vue+webpack中配置ESLint
2018/11/07 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
python去除字符串中的换行符
2017/10/11 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
Python守护进程实现过程详解
2020/02/10 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
测试工程师岗位职责
2013/11/28 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
水电维修专业推荐信
2014/09/06 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
培训督导岗位职责
2015/04/10 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript