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实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js单词形式的运算符
May 06 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
js插件实现图片滑动验证码
Sep 29 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
详解Vue slot插槽
Nov 20 Vue.js
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 similar text计算两个字符串相似度
2015/11/06 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
看了就知道什么是JSON
2007/12/09 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
jquery时间下拉框小例子
2013/04/15 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
2015/03/01 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
Vue完整项目构建(进阶篇)
2018/02/10 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Python实现的tab文件操作类分享
2014/11/20 Python
Python使用BeautifulSoup库解析HTML基本使用教程
2016/03/31 Python
python生成二维码的实例详解
2017/10/29 Python
django rest framework之请求与响应(详解)
2017/11/06 Python
基于Python的文件类型和字符串详解
2017/12/21 Python
tensorflow 打印内存中的变量方法
2018/07/30 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
PyCharm vs VSCode,作为python开发者,你更倾向哪种IDE呢?
2020/08/17 Python
Python request中文乱码问题解决方案
2020/09/17 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
中专自荐信
2013/10/13 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
创优争先心得体会
2014/09/11 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
致接力运动员加油稿
2015/07/21 职场文书
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js