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 getElementsByName()的用法说明
Jul 31 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
javascript关于运动的各种问题经典总结
Apr 27 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
jquery按回车键实现表单提交的简单实例
May 25 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
原生js实现密码强度验证功能
Mar 18 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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
flash用php连接数据库的代码
2011/04/21 PHP
php下获取http状态的实现代码
2014/05/09 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
LayUi使用switch开关,动态的去控制它是否被启用的方法
2019/09/21 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[02:04]2020年夜魇暗潮预告片
2020/10/30 DOTA
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python 模拟登陆github的示例
2020/12/04 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
最新大学生创业计划书写作攻略
2014/04/02 职场文书
白岩松演讲
2014/05/21 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技