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

使用AngularJS的$http服务进行POST方法传递JSON参数的实例 通过上述示例,你可以使用AngularJS的$http服务来发送POST请求并传递JSON参数。请注意,上述代码仅为示例,你需要根据你的实际情况进行相应的修改。确保将URL替换为你的实际服务器端点的URL,并根据需要修改JSON参数的内容。然后,在你的HTML文件中创建一个AngularJS应用程序,并将其命名为。下面是一个详细的示例,展示如何使用AngularJS的$http服务进行POST方法传递JSON参数。在失败的回调函数中,我们将错误状态码。,你需要根据实际情况将其替换为你的服务器端点的URL。 阅读详情

本文主要介绍如何使用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更加小巧轻便。希望本文对你有所帮助。


推荐一篇文章:HTTP四种常见的POST提交数据方式




【智能体】零代码实战:Coze多智能体协作开发全流程解析 本文详细解析了Coze平台的多智能体协作开发全流程,从入门指南到实战技巧,帮助用户零代码构建高效AI团队。通过模块化设计和专业分工,多智能体系统能显著提升任务处理速度和准确率,适用于客服、内容创作、教育培训等多个场景。文章还提供了性能优化和常见问题解决方案,助力开发者快速掌握Multi-Agent技术。 阅读详情

相关推荐

ETL第八章无人售货机零售项目实践

ETL实战项目——无人售货机

m0_52058217的博客 4418

Angularjs POST/GET/JSONP请求

1,POST请求POST请求应该是一般项目用的最多的请求方式,这里的header分几种:application/x-www-form-urlencoded标准的编码格式,也是Jquery的Ajax请求默认方式,这种方式的好处就是浏览器都支持,在请求发送过程中会对数据进行序列化处理,以键值对形式?key1=value1&key2=value2的方式发送到服务器,如果用Jquery,它内部已经...

王扬扬的博客 2232

电源设计之路-Buck电源环路设计(Type IIIA&Type IIIB)

在对Buck 环路补偿Type II拓扑进行仿真测试后,对瞬态波形以及伯德图已经有感官上的认知;然后再进一步对Type IIIA & IIIB进一步的学习;进一步了解Cout电容量和ESR对环路补偿的影响;认识到一个电源,不是参考Datasheet上的参数进行选值就行;更需要根据实际情况,功率电感值、输出电容值以及不同电容会有不一样的ESR,这些都会对环路参数产生一定的影响

2503_92839756的博客 752

AngularJS $http模块POST请求

一、代码如下: $http({ method:'post', url:'post.php', data:{name:"aaa",id:1,age:20} }).success(function(req){ console.log(req); }) 解决方案: 1、var myApp = angular.module(...

weixin_30699463的博客 207

GIS常用坐标系简介

EPSG:4326是基于WGS 84的地理坐标系,使用经纬度表示,适用于全局定位和地理数据表示。它的缺点是在进行距离、面积计算等地理分析时不够准确。EPSG:3857是投影坐标系,使用平面米坐标表示,适用于在线地图展示,特别适合 Web 地图应用。虽然它在地图展示中很高效,但由于投影引起的变形问题,它不适合高精度地理测量和计算。

weixin_59096287的博客 1976

G.6 PaddleHub实战篇{ERNIE实现文新闻本分类、ERNIE3.0 实现序列标注}【四】

百度飞桨:ERNIE 3.0 、通用信息抽取 UIE、paddleNLP的安装使用[一]_汀、的博客-优快云博客PaddleHub--飞桨预训练模型应用工具{风格迁移模型、词法分析情感分析、Fine-tune API微调}【一】_汀、的博客-优快云博客 PaddleHub--{超参优化AutoDL Finetuner}【二】_汀、的博客-优快云博客PaddleHub实战篇{词法分析模型LAC、情感分类ERNIE Tiny}训练、部署【三】_汀、的博客-优快云博客通过前面几篇文章大家都有一定了解,下面

丨汀、的博客 6185

angular post请求Content-Type为application/x-www-form-urlencoded时,后台接受的数据为null

post请求的请求体有以下两种格式: 字符串: ‘name=code_bunny&age=12’ 这种格式的请求体,需要配置请求头 ‘Content-Type’:‘application/x-www-form-urlencoded’ json: {name:‘code_bunny’,age:12} 这种格式的请求体,需要配置请求头 ‘Content-Type’:‘application/json;charset=UTF-8’ 在jquery的ajax中,默认都是第一种,虽然在写请求体参数

fdsjiaoDoctor的博客 1105

Unity 横版游戏开发天花板?状态机、联机同步与横版动作游戏架构全都有

在 Unity 横版动作游戏开发领域,最耗时间的往往不是角色移动,而是整套“可扩展架构”的搭建。包括角色状态管理、敌人 AI、武器系统、关卡编辑器、联机同步、输入适配、UI 与存档系统等。2D Action Platformer Kit 的核心价值,并不只是“提供素材”,而是它已经帮开发者搭好了一整套适用于横版动作游戏的底层框架。

2403_88403568的博客 424

angular ajax get post 参数,AngularJS - $ http.post发送请求参数而不是JSON的任何方式?...

AngularJS - $ http.post发送请求参数而不是JSON的任何方式?我有一些旧的代码通过jQuery的post方法发出一个AJAX POST请求,看起来像这样:$.post("/foo/bar",requestData,function(responseData){//dostuffwithresponse}requestData只是一个具有一些基本字符串属性的javas...

weixin_42138716的博客 773

深入C++学习还必须掌握的一基础知识精讲

施磊C++语言基础提高课程笔记,包括了new/delete;malloc/free;引用和指针;const,指计和引用的结合;函数重载,inline的数,参数带默认值的函数;函数模板等知识点

GeniusAng的博客 1477

TC3XX - MCAL知识点(十三):IOM EB-tresos配置说明及代码浅析

输入输出监视器(IOM)驱动程序作为比较单元,检查系统外设输出的正确操作,这些输出可以作为监视功能的输入。监控功能需要通过配置IOM硬件来实现。它向SMU生成全局系统事件。IOM驱动程序初始化并控制微控制器的IOM单元。驱动程序还为用户提供初始化和设置IOM内部单元的阈值的服务。它还应该提供重置IOM内核的服务。应该提供该服务来组合单个或多个本地事件,以生成单个全局系统事件。IOM驱动程序严重依赖于初始化和配置。软硬件关系如下图缩写解释LAM逻辑分析模块ECM事件组合模块FPC。

梦想技术家 1799

[转][Angularjs]$http.post与$.post

本文转自:https://www.cnblogs.com/wolf-sun/p/6878868.html 摘要 在angularjs发送post请求的时候,确实很困惑,在传递json数据的时候,总会遇到在服务端无法接受到参数的情况,这里有必要与$.post进行比较学习一下。 一个例子 这里模拟登录的一个场景,post用户名与密码,服务端接受账户并直接返回到客户端不做其它业务处理。 使...

weixin_34407348的博客 139

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

angularjs $http.get 和 $http.post 传递参数

$http.get(URL,{ params: { "id":id } }) .success(function(response, status, headers, config){ }) $http.post(URL,{ "id":id }) .success(function(response...

清雨小竹 3406

lwip-2.0.3

lwip是瑞典计算机科学院(SICS)的Adam Dunkels 开发的一个小型开源的TCP/IP协议栈。实现的重点是在保持TCP协议主要功能的基础上减少对RAM 的占用。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

php 怎么带参数post,怎么用Post方法传递json参数

这次给大家带来怎么用Post方法传递json参数,用Post方法传递json参数的注意事项有哪些,下面就是实战案例,一起来看一下。本文主要介绍如何使用Angularjs $http服务以POST方法向服务器传递json对象数据。具体如下:一、$http POST方法默认提交数据的类型为application/jsonvar data = {'wid':'0', 'praise' : '25'};$...

weixin_28808145的博客 1339

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

AngularJS $http用法总结

    最近由于项目需要,在研究AngularJS $http的用法,查了很多资料,发现貌似没有一篇内容可以完整的满足我对$http的基本了解,为了下次方便自己查找,所以特意把最近查到的一些资料和自己的理解记录下来。如果有理解不到位的地方,也欢迎路过的大神可以指点。一.$http简介1.$http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。2.$http服务,它是对原生X...

心若向阳,无谓悲伤的博客 1万+

angularjs jsonp php,AngularJS中$http服务使用方法详解

这次给大家带来AngularJS中$http服务使用方法详解,AngularJS中$http服务的注意事项有哪些,下面就是实战案例,一起来看一下。我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。1、链式调用$http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的配置内容。这个函数返回一个...

weixin_33592736的博客 220

AngularJS中$http服务的简单用法

我们可以使用内置的$http服务直接同外部进行通信。$http服务只是简单的封装了浏览器原生的XMLHttpRequest对象。 1、链式调用 $http服务是只能接受一个参数的函数,这个参数是一个对象,包含了用来生成HTTP请求的 配置内容。这个函数返回一个promise对象,具有success和error两个方法。 $http({ url:'data.json', meth

qian_xiaona的博客 643

angularjs 利用$http post数据

在angularjs中我们最好不要使用jquery提供de

qq_19245589的专栏 3932

Angularjs $http get post区别

Angularjs $http 请求数据 1. get 请求 2.POST请求 3.json请求 angular中ajax请求的方法说明: /* * _http:angularJs中的$http对象 * _url:ajax请求的URL * _method:请求方式:POST或GET

fn_2015的博客 1912

angularjs中$http模块POST请求request payload转form data

这是我后台SpringMVC控制器接收isform参数的方法,只是简单的打出它的值: ? 1 2 3 4 5 6 7 8 @RequestMapping(method = RequestMethod.POST)     @ResponseBody     public Map sa

李登辉的博客 3585

如何解决angularJS中用post方法时后台拿不到值的问题

解决了angularJS框架中用post方法在后台拿不到值的问题。

zsgod的博客 6170

($http service) AngularJs的前端数据传后台

什么是服务? 服务提供了一种能在应用的整个生命周期内保持数据的方法,它能够在控制器之间进行通信,并且能保证数据的一致性。 服务是一个单例对象,在每个应用中只会被实例化一次(被$injector实例化),并且是延迟加载的(需要时才会被创建)。服务提供了把与特定功能相关联的方法集中在一起的接口。(此解释来源于AngularJS权威教程)。 服务就是用来创建数据,存储数据,也可以向后台请求数据的一个...

Larry的博客 537

AngularJS:使用$http请求后台(post和get方式)

1.声明 当前内容主要用于学习和使用AngularJS向后台传递数据,主要有两种post和get请求 2. demo 1.初始化app并传递$http,此时就可以使用$http了 angular.module('myApp', []).controller('userCtrl', function($scope, $http) {}); 2.使用get方式请求数据: $http({ method: 'GET', url: 'http://localhost:8080/selectUserAll

编程学习者的博客 1505
上一篇: js创建、写入、读取文件。
下一篇: jQuery ajax请求json数据回调函数中data为undefined解决方法
Rotbing
博客等级 码龄10年 10粉丝 4原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值