困扰了我好几天的问题!!!

刚开始学play框架,在向后台传值时,一直不成功!

当你用$POST传递一个参数时:

HTML:

<button ng-click=test()>测试</button>

JS:

  $scope.test = function() {

    $http({
      method: 'POST',
      url: '/Application/jump',
      data:{name:"zby"},
    }).then(function successCallback(response) {
      // 请求成功执行代码
      }, function errorCallback(response) {
    // 请求失败执行代码
    });

  }

我的后台控制器方法:

  public static void test(String name) {
    System.out.println(name);

    System.out.println(params.get("name"));

  }

这样传到后台的值为NULL,NULL。

我把JS换成:

  $scope.test = function() {
    $http({
      method: 'POST',
      url: '/Application/test',
      params: {name:"zby"},
    }).then(function successCallback(response) {
      // 请求成功执行代码
    }, function errorCallback(response) {
      // 请求失败执行代码
    });
  }

后台控制器方法不变。

传到后台的值为zby,zby。

同理传递多个参数也能成功,只要把JS里的params与后台控制器的test的参数改成多个就行,但是两个参数名字,个数必须一致。

还有一种方法则是把传递的值直接写入URL里,把JS改成

  $scope.test = function() {
    var name = "zby";
    $http({
      method: 'POST',
      url: '/Application/test?name=' + name,
    }).then(function successCallback(response) {
      // 请求成功执行代码
    }, function errorCallback(response) {
      // 请求失败执行代码
    });
  }

后台控制器方法不变,照样能接收到后台传来的值。

接下来看看$get方法传值:

①方法传到后台的值与$post一样为NULL,NULL。

②方法传到后台的值与$post一样为zby,zby。

③方法传到后台的值与$post一样为zby,zby。

所以能看出来这三种方法$post,$get传值都一样。

接下来我们看看第四种方法

  $scope.test = function() {
    $http({
      method: 'POST',
      url: '/Application/test',
      data: {name: "zby"},
      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("&");
      }
    }).then(function successCallback(response) {
      // 请求成功执行代码
    }, function errorCallback(response) {
      // 请求失败执行代码
    });
  }

后台控制器方法不变,传递到后台的值为zby,zby。

那么我们看看这种方法GET请求行不行,将JS里的method改为method: 'GET',传递到后台的值为NULL,NULL。

$get请求并不能用这种方法传递,而$post确可以。这是为什么呢?

来看看这四种方法的request请求到底发了啥数据过来

第①种:

$post

$get

第②种:

$post

$get

第③种:

$post

$get

第④种:

$post:

$get:

通过测试可知,

在第②种方法与第③种方法中,$post与$get请求都能够向后台传值,并且通过图的比较可知都是通过Query String Parameters传值

在第①种方法中,$post与$get请求不能向后台传值,但是$post请求的图中多出了

在第④种方法中,$get请求不能向后台传值,而$post请求能向后台传值,并且第①种与第④种的区别在于第④种方法添加了如下代码:

      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("&"); 
      }

为什么加了这段代码$post请求就可以传值成功了呢?

我们看看两种的区别:

①:

④:

可以发现AngularJs用post 提交数据 以 json 格式提交的,而平时我们jquery post 提交数据是以 form-data 的形式提交的,只有把它转化为form-data形式后台才能接收到。

解决方法就是:改AngularJs 提交数据的方式,配置 header 值,使用 transformRequest对提交数据进行序列化,把 json 对象更改为字符串。

转载于:https://www.cnblogs.com/zhengbiyu/p/8428083.html

angular js $post,$get请求传值相关推荐

  1. angluar ajax实例,Angular服务Request异步请求的实例讲解

    首先这里我简单写个例子来方便您的理解 var request = { post: function() { var errorCallback = { error: function(f) { thi ...

  2. angular开发中对请求数据层的封装

    代码地址如下: http://www.demodashi.com/demo/11481.html 一.本章节仅仅是对angular4项目开发中数据请求封装到model中 仅仅是在项目angular4项 ...

  3. Angular Img标签自定义请求header Authorization

    Angular Img标签自定义请求header Authorization 背景 是这样的需求,有一个web页面,里面图片的上传和预览来自于一个独立的文件服务器,对http的请求需要进行访问权限的设 ...

  4. 【Angular中的HTTP请求】- 拦截器 HttpInterceptor 详解

    通过学习 HttpClient 的工作机制 ,我们知道对于HTTP请求,HttpClient 实际上是构建了一个链式的处理流程: 在HttpBackend的处理流程中请求被发出.在HttpBacken ...

  5. 关于Angular使用http发送请求后的响应处理

    源代码: import { Component, OnInit } from '@angular/core'; import { FormControl } from '@angular/forms' ...

  6. 前端框架-Angular.js

    前端的功能与单页应用 就webapp开发而言,前端实现的功能主要有: -实现UI(渲染出用户可见的视图和各种功能组件) -对用户的操作(事件)做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 ...

  7. 初识 angular js

    创建第一个 angularjs 项目 <html ng-app>  : 表名这个是angularjs 项目 双大括号标记 {{ }} 的内容是问候语中绑定的表达式 Angular 模型变量 ...

  8. Windows环境安装运行:Angular.js

    一.下载 Node.js https://nodejs.org/en/download/ 检测版本: cmd: node -v 二.安装typescript和typings 使用 Node.js 包管 ...

  9. 该怎么写Angular JS

    <html ng-app> <head>     <title>表单</title>     <script type="text/ja ...

最新文章

  1. centos7安装Oracle12(完整版)
  2. 适合手机运行的服务器系统,一台服务器能维持多久?谈谈服务器的运行寿命
  3. 如何搭建安卓开发持续化集成环境(Ubuntu + Jenkins + SonarQube)
  4. 算法学习之路|最小生成树—kruskal
  5. Flask-SocketIO 简单使用指南
  6. 太厉害了!3小时34分!53岁院士施一公完成人生首马
  7. linux软件包安装及自制yum源
  8. 过滤器链模式PK匿名方法实现,哪个更优雅?
  9. STM32系列单片机在进入main函数前都在干些什么?
  10. 在Excel的单元格中,调用VBA函数
  11. python自动化办公教程-Python自动化办公之操作Excel文件
  12. pdflush进程详解
  13. 模板码:个性二维码制作,改变二维码设计方式
  14. html5学习开发指南
  15. 利用简单的爬虫获取CV顶会论文
  16. SASE:基于数字身份标识的网络与安全访问云服务
  17. 高等数学(第七版)同济大学 习题10-2(中5题) 个人解答
  18. 消费者不好骗!2021过半,网红品牌为毛集体“玩崩”了?
  19. 【分享】insert出现Could not set property ‘id‘ of class XXXXXXXX
  20. 高通平台msm8916修改开机logo【原创】

热门文章

  1. 易语言操作mysql数据库
  2. STC89C52单片机 点亮LED灯
  3. Qt Creator创建项目
  4. shell判断false_Python中的True, False条件判断
  5. 最全面的Linux指令大全
  6. 洛谷 P2015 二叉苹果树
  7. ACM Smallest Difference
  8. loaction.reload(false)和location.reload(true) js发起请求
  9. MySQL 5.6 中的 TIMESTAMP 和 explicit_defaults_for_timestamp 参数
  10. Kinect for windows的脸部识别