AngularJS下$http服务Post方法传递json参数的实例

所属分类: 网络编程 / JavaScript 阅读数: 1961
收藏 0 赞 0 分享

本文主要介绍如何使用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));

最终发送的请求是:

然后php服务端通过$_POST['commit'] 对象就可以获得json字符串了。json对象用于http数据传输方便易用,相比xml更加小巧轻便。希望本文对你有所帮助。推荐一篇文章:HTTP四种常见的POST提交数据方式然后 php服务端通过$_POST['commit'] 对象就可以获得json字符串了。

json对象用于http数据传输方便易用,相比xml更加小巧轻便。希望本文对你有所帮助。

以上这篇AngularJS下$http服务Post方法传递json参数的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

浅谈Koa2框架利用CORS完成跨域ajax请求

这篇文章主要介绍了浅谈Koa2框架利用CORS完成跨域ajax请求,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅析Vue中method与computed的区别

在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码,但是什么时候用哪个属性,要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
收藏 0 赞 0 分享

Vue2.0 http请求以及loading展示实例

下面小编就为大家分享一篇Vue2.0 http请求以及loading展示实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

轻松搞定jQuery+JSONP跨域请求的解决方案

了解了jsonp之后,大家应该也都明白了,jsonp主要就是用来实现跨域的获取数据,今天我们就来详细探讨下如何在实际中应用jsonp实现跨域
收藏 0 赞 0 分享

Vue2.0实现组件数据的双向绑定问题

这篇文章主要介绍了Vue2.0实现组件数据的双向绑定问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

node的process以及child_process模块学习笔记

这篇文章主要介绍了node的process以及child_process模块学习笔记,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

vue2.0 循环遍历加载不同图片的方法

下面小编就为大家分享一篇vue2.0 循环遍历加载不同图片的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈Vue2.0中v-for迭代语法的变化(key、index)

下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用vue-aplayer插件时出现的问题的解决

这篇文章主要介绍了使用vue-aplayer插件时出现的问题的解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Element-ui table中过滤条件变更表格内容的方法

下面小编就为大家分享一篇Element-ui table中过滤条件变更表格内容的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多