angularJS- $http请求

angular使用post、get向后台传参的问题

一、问题的来源

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

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

var app = angular.module(‘app‘,[]);
        app.controller(‘ctrl‘,function($scope,$q,$http){
            var defer = $q.defer();
            var promise = defer.promise;
            $http({
                method: "get",
                params:{id:1,name:jyy},
                url:"1.php"
            }).success(function(data){
                defer.resolve(data);
            });
            promise.then(function(data){
                $scope.data = data;
            })
        })

  在后台(PHP)输入echo $_GET[id]就可以正常显示了。

那么接下来就研究怎么解决post的传值了。

二、问题的解决

  1. 修改请求头

  第一种方法就是在ng中修改请求头将json格式改成x-www-form-urlencoded。修改方法点击即可查看。

  值得注意的是,在使用第二种方法时,可以修改put,get,post,common的传参格式。因此修改哪种方式,就只能使用这种方式才能在后台得到参数。这篇博文写到使用common进行设置可以同时使用put、get、post进行传参。但是在我的实际操作中发现对common进行修改并不能使用post进行传参,而只有设置了post的请求头才可以。

  另外由于在ng中的参数都是使用json格式表达,因此需要引入jquery,使用其$.param("参数列表的json格式")进行序列化表示。

  首先使用修改post请求头。具体代码如下:

var app = angular.module(‘app‘);   
        app.config(function($httpProvider){
            $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;
            })
        })

  此时在后台中(使用的是php),输入echo $_POST[id],就会显示。而debug其中显示的请求头正是我们设置的。

  2.在后台进行解决

  由于使用的是php,所以暂时用php的方法解决。在这个方法中,我们不修改请求头。因为get传值是正常的,那么,只要能够得到post的值就好。既然ng向后台传值了,即便是因为请求头不同,但是总会传过来什么的吧,既然能够传过来,就先获取它。这个时候使用$GLOBALS[‘HTTP_RAW_POST_DATA‘]将这个传过来的东西显示出来。那么这个$GLOBALS[‘HTTP_RAW_POST_DATA‘]是什么呢?在网上查询得知$HTTP_RAW_POST_DATA 变量包含有原始的 POST 数据。此变量仅在碰到未识别 MIME 类型的数据时产生,PHP不能识别的Content-Type类型的时候,会将http请求包中相应的数据填入变量$HTTP_RAW_POST_DATA。就是说现在这个请求头虽然是有冲突的,但是却能够显示出来。如下:

var app = angular.module(‘app‘,[]);
        app.controller(‘ctrl‘,function($scope,$q,$http){
            var defer = $q.defer();
            var promise = defer.promise;
            $http({
                method: "post",
                data:{‘id‘:‘1‘,‘name‘:‘jyy‘},
                url:"1.php"
            }).success(function(data){
                defer.resolve(data);
            });
            promise.then(function(data){
                $scope.data = data;
            })
        })

php代码:

echo $GLOBALS[‘HTTP_RAW_POST_DATA‘];

  此时显示出来的东西是:{"id":"1","name":"jyy"}。发现这个结果是正确显示了。那么直接对齐进行操作不就可以了?好吧,那就先看看是什么类型:使用gettype()得到的是string,就是说他是个json字符串。那就使用json_decode()转换,发现会报错。好吧,放弃使用这个方法。

  但是此时还有另外的方法。使用file_get_contents("php://input"),这个方法中 php://input 是个可以访问请求的原始数据的只读流。 POST 请求的情况下,最好使用 php://input 来代替 $HTTP_RAW_POST_DATA,因为它不依赖于特定的 php.ini 指令。 此时这个方法就可以返回传过来的参数了。代码如下:

$a = json_decode(file_get_contents("php://input"));
    echo $a->id;

  结果输出正确的id。

-转载

时间: 2024-10-12 16:21:19

angularJS- $http请求的相关文章

http请求与响应全过程

HTTP 无状态性 HTTP 协议是无状态的(stateless).也就是说,同一个客户端第二次访问同一个服务器上的页面时,服务器无法知道这个客户端曾经访问过,服务器也无法分辨不同的客户端.HTTP 的无状态特性简化了服务器的设计,使服务器更容易支持大量并发的HTTP 请求. HTTP 持久连接       HTTP1.0 使用的是非持久连接,主要缺点是客户端必须为每一个待请求的对象建立并维护一个新的连接,即每请求一个文档就要有两倍RTT 的开销.因为同一个页面可能存在多个对象,所以非持久连接可

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里: 原因:1)前端提交数据的字段名称或者是字段类型和后台的实体类不一致,导致无法封装: 2)前端提交的到后台的数据应该是json字符串类型,而前端没有将对象转化为字符串类型: 解决方案: 1)对照字段名称,类型保证一致性 2)使用stringify将前端传递的对象转化为字符串    data: JSON.stringify(param)  ;

WAF——针对Web应用发起的攻击,包括但不限于以下攻击类型:SQL注入、XSS跨站、Webshell上传、命令注入、非法HTTP协议请求、非授权文件访问等

核心概念 WAF Web应用防火墙(Web Application Firewall),简称WAF. Web攻击 针对Web应用发起的攻击,包括但不限于以下攻击类型:SQL注入.XSS跨站.Webshell上传.命令注入.非法HTTP协议请求.非授权文件访问等.

POST请求 参数 使用body

主要是记录一下,post请求,参数请放到body里: 虽然放到params里,也可以,但是并不合理,因为url的长度是有限制的

http网络请求 基础

http://tuijian.hao123.com:80/index.html scheme(协议前缀): host(主机):port(端口):path(资源路径) 核心类: URL:网络统计资源定位符 ,标识是网络中唯一资源 HttpURLConnection 网络资源连接类,可以打开网络连接,读取网路资源,上传网路资源等 功能方法:getinputStream()来获取网路资源字节读取流 getContentLength()来获取网路资源字节数 getPesponseCode() 来获取网路

HTTP请求报文详解

HTTP Request Header 请求头 Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集. Accept-Charset: iso-8859-5 Accept-Encoding 指定浏览器可以支持的web服务器返回内容压缩编码类型. Accept-Encoding: compress, gzip Accept-Language 浏览器可接受的语言 Ac

学习笔记12JS异步请求

*一般用JS来监听按钮事件,都应该先监听页面OnLoad事件. *Js写在哪里,就会在页面解析到哪里执行. 异步请求:所谓异步请求,就是使用JS来监听按钮点击事件,并且发送请求,等到回复后,再使用JS来进行页面跳转,或动态改变页面.使用场合:当请求是ashx是,都可以使用异步方法,页面就无需刷到ashx的一个空白页面或者不用于展示的页面了. *使用jquery发送异步请求:$("#按钮ID").Click(fuction(){ $.get( "页面URL.ashx"

接口测试,添加请求头的时候,大小写一定要正确

今天同事碰到了一个问题,就是他用robot framework+requests写接口测试用例的时候,post一个json数据的时候,发送出去的数据一直是data=<empty>,明明有数据啊,通过log打印也是没问题. 最终发现是添加头的时候,将Content-Type写成了content-type. 我刚开始也没看出来问题在哪里,费了好长时间才搞定.说一下如何排查出的这个问题吧,以往写Content-Type的时候,还真没注意到大小写的问题,jmeter应该不区分的.于是今天一直没想到是这

Spring MVC HTTP请求数据绑定

package com.springmvc.controller; import com.springmvc.model.UserInfo; import org.springframework.core.io.ClassPathResource; import org.springframework.core.io.Resource; import org.springframework.stereotype.Controller; import org.springframework.uti

node.js搭建代理服务器请求数据

1.引入node.js中的模块 1 var http = require("http"); 2 var url = require("url"); 3 var qs = require("querystring"); 2.创建服务器 //用node中的http创建服务器 并传入两个形参 http.createServer(function(req , res) { //设置请求头 允许所有域名访问 解决跨域 res.setHeader("