angular ajax get post 参数,Angular的Post 传递参数问题及解决方法

一、传递参数过程中POST会出问题,问题来源:

我们都知道向后台传参可以使用get、post,其形式类似于name=iyy&id=001 。但是在angular中却发现使用$http post 进行异步传输的过程中后台是接收不到数据的,其实这个问题就是因为请求头的缘故。在angular中默认的请求头是“Content-Type":"application/json",也就是说传递参数是使用json格式。但后台默认的却是Content-Type': 'application/x-www-form-urlencoded'。因此在这样的情况下后台接收到的数据就会是空的。

那么为什么使用get形式就可以传参呢?因为get这个键的值是一个字符串map或对象,会被转换成查询字符串追加在URL后面。如果不是字符串,会被json序列化,可以理解为在get中参数的传递是直接追加在utl后面的,那么此时参数形式{“id”:"1","name":"yy"}会被转化成id=1&name=yy追加在url后面,后台就直接获取到了。

Jquery、原生Ajax:

头: Content-Type: application/x-www-form-urlencoded 传输数据 都认(经典所有服务器都认)

Angular Js:

application/json 新潮--部分服务器默认不支持

解决方法:

配置angularJs 库

配置AngularJs的POST方式

a. 修改请求头:

$http({

url,

method,

data,

headers:{ 'Content-Type':'application/x-www-form-urlencoded ' }

})

b: 修改传递内容:

transformRequest 传进去一个obj,返回一个编码编号

$http({

transformRequest(obj){

return "要传输的字符串"

//obj=>{a:"12", b:"5"}

//return "a=12&b=5"

let att= [];

for(let name in obj){

arr.push(`$(name)=$(obj[name])`);

}

return arr.join('&');

}

})

如把{a: 12, b:5 } =>"a=12&b=5"

c: 完整写法(一个完整写法、直接在module配置一次即可):

var app = angular.module('app',[]);

//方法,修改ng的请求头

app.config(function($httpProvider){

$httpProvider.defaults.transformRequest=function(obj){

let arr =[];

for(let name in obj){

arr.push(`${name}=${obj[name]}`);

}

return arr.join('&');

};

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

});

app.controller('ctrl',function($scope,$resource,$q,$http){

var defer = $q.defer();

var promise = defer.promise;

$http({

method: "post",

data:$.param({"id":"1","name":"jyy"}),

url:"1.php"

}).success(function(data){

defer.resolve(data);

});

promise.then(function(data){

$scope.data = data;

})

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367157.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[No0000187]可能是把Java内存区域讲的最清楚的一篇文章

写在前面(常见面试题) 基本问题: 介绍下 Java 内存区域(运行时数据区)Java 对象的创建过程(五步,建议能默写出来并且要知道每一步虚拟机做了什么)对象的访问定位的两种方式&#xff…

Java语言基础及java核心

一、Java语言特点 1、 简单 2、 面向对象 3、 分布式 4、 健壮 5、 安全 6、 中性架构跨平台 7、 超强的可移植性 8、 高性能 9、 多线程 二、java的环境变量 JAVA_HOMEC:\Program Files\Java\jdk1.8.0_101 (到你的安装目录下) CLASSPASH./ &#xff0…

如何使用Quartz Scheduler和日志记录创建Web应用程序

我有时会在Quartz Scheduler论坛中为用户提供帮助。 有时,有人会问他/她如何在Web应用程序中设置Quartz。 实际上,这是一件相当简单的事情。 该库已经带有一个ServletContextListener ,您可以使用它启动调度程序。 我将在这里向您展示一个简单…

移动端日期选择插件rolldate

rolldate为上一版jquery移动端时间插件的全新版本,目前保留了上一版的大部分功能,并且增加了回调函数,以及主题风格选取,最重要的是解决了上一版本的遗留问题,依赖jquery、滑动不够流畅、参数设计不够合理等等。开发日…

ik分词器 mysql php_php环境下使用elasticSearch+ik分词器进行全文搜索

首先需要说明的一点是,如果需要启用ik分词器,那么分词器的版本必须与es版本一致,即6.3.0的分词器需要同样6.3.0版本的es支持。安装javawin-64bit的安装包需要去java英文官网查找安装ES6.3.0版本es下载地址:https://www.elastic.co…

服务器如何查看gpu型号,linux 查看服务器gpu

linux 查看服务器gpu 内容精选换一换本节操作介绍通过华为云APP连接Linux实例的操作步骤。云服务器状态为“运行中”。已获取Linux云服务器用户名和密码,忘记密码请参考在控制台重置云耀云服务器密码重置密码。云耀云服务器已经绑定弹性公网IP。所在安全组入方向已开…

Antd-Select组件的深入用法

一、Antd-Select提供几种类型 最基础版只提供下拉功能的选择器带搜索功能的下拉选择器可多选的下拉选择器可搜索、可多选、可随意输入内容的tag下拉选择器(支持自动分词)多级联动下拉选择器搜索远程数据下拉框二、一些潜在用法 如果Select.Option选项的数量特别大:2k、3k... 假…

WS-Security:使用BinarySecurityToken进行身份验证

众所周知,WS-Security设定的目标之一是对SOAP消息强制执行完整性和/或保密。 在完整性的情况下,添加到SOAP消息的签名是数学过程的结果,该过程涉及发送者的私钥,从而导致加密的消息摘要。 默认情况下,大多数框架&…

Vue(ES6)中的data属性为什么不能是一个对象?

以下引官网原文:当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象,则所有的实例将共享引用同一个数据对象!通过提供 data 函数&#xff…

echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图

在main.js中引入echartsimport echarts from ‘echarts‘Vue.prototype.$echarts echarts在相应的vue中导入echartsimport echarts from ‘echarts‘;实现柱状图显示mounted: function () {// 基于准备好的dom,初始化echarts实例let myChart echarts.init(documen…

从计算机体系结构方面思考深度学习

今年 1 月,谷歌人工智能负责人 Jeff Dean(当时还是谷歌大脑负责人)与 2017 年图灵奖得主、体系结构巨擘 David Patterson(当时获奖结果尚未公布)联合发表了题为《计算机体系结构黄金时代:赋能机器学习革命》…

使用Apollo通过WebSocket通过STOMP轻松进行消息传递

在我以前的文章中,我介绍了几个有趣的用例,这些用例使用著名的消息代理HornetQ和ActiveMQ通过Websockects实现STOMP消息传递。 但是我没有介绍的是Apollo,因为我个人认为它的API是冗长的,并且不像Java开发人员那样表现力强。 尽管…

h5渲染性能一瞥

内容来源:2018 年 6 月 30 日,饿了么前端主管向勇在“饿了么技术沙龙・第27弹 【前端专场】”进行《h5渲染性能一瞥》演讲分享。IT 大咖说(微信id:itdakashuo)作为独家视频合作方,经主办方和讲者审阅授权发…

爬虫系列之requests

爬取百度内容: 1 import requests2 url "https://www.baidu.com"3 4 if __name__ __main__:5 try:6 kv {user-agent: Mozilla/5.0}7 r requests.get(url, headerskv)8 r.raise_for_status() #返回状态值,如果…

高并发常见面试题

1、线程与进程 进程是一个实体。每一个进程都有它自己的地址空间,一般情况下,包括文本区域(text region)、数据区域(data region)和堆栈(stack region)。文本区域存储处理器执行的代…

如何使用JSON和Servlet创建JQuery DataTable

在本文中,我将介绍使用简单servlet传递的JSON创建JQuery DataTable所需的基本编码。 DataTable是基于JQuery的非常强大的网格,具有高级功能,可以使用自定义功能在短时间内构建。 安装 下载最新的JQuery DataTable下载 上面的下载将提供两个…

python将json转换为excel_使用python将Excel转换为JSON_python_酷徒编程知识库

我有一个excel文件,我想转换为JSON文件,excel类似于:Col A Col C Col F1 A EE2 B FF4 C FF5 D HH6 D HH7 A EE8 E EE希望JSON遵循以下格式:{"EE": {"A": {"Col A key":"1","Col A k…

页面重绘 回流及其优化

在讨论页面重绘、回流之前。需要对页面的呈现流程有些了解,页面是怎么把html结合css等显示到浏览器上的, 下面的流程图显示了浏览器对页面的呈现的处理流程。可能不同的浏览器略微会有些不同。但基本上都是类似的。 1. 浏览器把获取到的HTML代码解析成1…

Servlet异常和错误处理示例教程

有时我写了一篇有关Java异常处理的文章,但是当涉及到Web应用程序时,我们需要的不仅仅是Java中的异常处理。 Servlet异常 如果您注意到,doGet()和doPost()方法将抛出ServletException和IOExcept…

前端介绍开始(—)

web 的组成浏览器服务器:代替用户向服务器发送请求通信协议:规范数据传输及打包方式(http,https) 服务器:1 作用:1 接收用户请求并响应 2 存储数据3 具有安全性功能2 产品:1 Tomcat2 Aapache3 N…